This jQuery plugin makes simple client side form validation easy, whilst still offering plenty of customization options.
It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. This post describe the Text box validation using jQuery.
|
1 2 3 |
<!-- Load jQuery and the validate plugin --> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- jQuery Form Validation code --> <script> // When the browser is ready... $(function() { // Setup form validation on the #register-form element $("#register-form").validate({ // Specify the validation rules rules: { firstname: "required", lastname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, agree: "required" }, // Specify the validation error messages messages: { firstname: "Please enter your first name", lastname: "Please enter your last name", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address", agree: "Please accept our policy" }, submitHandler: function(form) { form.submit(); } }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>Register here</h1> <!-- The form that will be parsed by jQuery before submit --> <form action="" method="post" id="register-form" novalidate="novalidate"> <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br /> <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br /> <div class="label">Email</div><input type="text" id="email" name="email" /><br /> <div class="label">Password</div><input type="password" id="password" name="password" /><br /> <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div> </form> |
.If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: javascript code text box validation, Javasrcipt, Jquery, Text box validation, Text box validation using jquery, textbox validation example
