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> |
.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: javascript code text box validation, Javasrcipt, Jquery, Text box validation, Text box validation using jquery, textbox validation example
