Jquery Addclassrules Example - Jquery

How to validate form using jquery validator?

Snippet Code

Rate this page :
  [ 0 votes]

Addclassrules creates a custom message and applies that class to all fields. This jquery code validate a simple registration form. You need a validate plugin to run this code.

<html> <head> <!-- Load jQuery and the validate plugin --> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <!-- 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: "<font color='red'>Please enter your first name</font>", lastname: "<font color='red'>Please enter your last name</font>", password: { required: "<font color='red'>Please provide a password</font>", minlength: "<font color='red'>Your password must be at least 5 characters long</font>" }, email: "<font color='red'>Please enter a valid email address</font>", agree: "<font color='red'>Please accept our policy</font>" }, submitHandler: function(form) { // form.submit(); } }); }); </script> </head> <body> <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" /> <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /> <div class="label">Email</div><input type="text" id="email" name="email" /> <div class="label">Password</div><input type="password" id="password" name="password" /> <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div> </form> </body> </html>


Ask Questions

Ask Question