Form validation in jQuery without using a plugin

Question

I want to perform client side validation of a simple form using jQuery, but I cannot use any plugins to validate. I want to display any error messages in a single warning window.

This is my form:

<form action="" method="post" class="a"> Name : <input type="text" class="text" name="name" id="name" /> <br/> Address : <input type="text" class="text" name="address" id="address" /> <br/> Email: <input type="text" class="text" name="email" id="email" /> <br/> <input type="button" id="submit" value="Submit" name="submit" /> </form> 

If the user submits the form without filling in, I need to display 3 error messages in one warning window. Like this

 Name can not be empty. Address can not be empty. email can not be empty. 

If only one or two fields remain empty, I need to control the error message depending on the situation.

Here I tried this with jQuery. But warnings are displayed in separate fields:

My jQuery:

 $('#submit').on('click', function() { valid = true; if ($('#name').val() == '') { alert ("please enter your name"); valid = false; } if ($('#address').val() == '') { alert ("please enter your address"); valid = false; } }); 

Here is the fiddle .

Can anyone tell me how I can figure this out? Thanks.

Answer 1

Scroll through each input element on the form and see if it matters. If you do not add an error message to the line that you later notify if the valid value is false.

 $('#submit').on('click', function() { var valid = true, message = ''; $('form input').each(function() { var $this = $(this); if(!$this.val()) { var inputName = $this.attr('name'); valid = false; message += 'Please enter your ' + inputName + '\n'; } }); if(!valid) { alert(message); } }); 

Fiddle: http://jsfiddle.net/WF2J9/17/

Answer 2

If you want only 1 warning to appear at a time, you need to check the valid status for each condition:

 $('#submit').on('click', function() { valid = true; if (valid && $('#name').val() == '') { alert ("please enter your name"); valid = false; } if (valid && $('#address').val() == '') { alert ("please enter your address"); valid = false; } return valid; }); 

Updated script

Answer 3

try the following:

  $('#submit').on('click', function() { var valid = true, errorMessage = ""; if ($('#name').val() == '') { errorMessage = "please enter your name \n"; valid = false; } if ($('#address').val() == '') { errorMessage += "please enter your address\n"; valid = false; } if ($('#email').val() == '') { errorMessage += "please enter your email\n"; valid = false; } if( !valid && errorMessage.length > 0){ alert(errorMessage); } }); 

working fiddle here: http://jsfiddle.net/WF2J9/24/

Hope this helps.

Answer 4

form validation:

This code is provided for simple form validation using jquery.you can use this to validate in your form.

thanks

  <form action="" method="post" name="ContactForm" id="ContactForm1"> <div id='message_post'></div> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" name="fname" class="form-control" placeholder="First Name *"> </div> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" name="lname" required="required" class="form-control" placeholder="Last Name *"> </div> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" name="phone" required="required" class="form-control" placeholder="Phone (bh) *"> </div> <div class="input-group"> <span class="input-group-addon"></span> <input type="text" name="email" required="required" class="form-control" placeholder="Email *"> </div> <div class="input-group"> <span class="input-group-addon"></span> <textarea rows="5" name="message" required="required" class="form-control" placeholder="Message *"></textarea> </div> <div class="input-group form-buttons"> <span class="input-group-btn"> <input type="submit" id="btn" name="buttn" value="Send Message" class="btn btn-default"/><i class="fa fa-envelope"></i> </span> </div> </form> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script> <script> // just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#ContactForm1" ).validate({ rules: { fname: "required", lname: "required", phone: "required", email: { required: true, email: true }, message: "required", } }); </script>