Advertisement
Shailrshah

jQuery Form Validation

Mar 31st, 2014
185
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 1.86 KB | None | 0 0
  1. <html>
  2. <head>
  3. <title>jQuery Form Validation</title>
  4. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  5. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  6. <script>
  7. $.validator.setDefaults({
  8.     submitHandler: function() {alert("submitted!");}
  9. });
  10. $(document).ready(function() {
  11.     $("#signupForm").validate({
  12.         rules:{
  13.             name:"required",
  14.             phone:{required: true, rangelength: [10, 10], digits: true},
  15.             username:{required: true, minlength: 2},
  16.             password:{required: true, minlength: 5},
  17.             email:{required: true, email: true},
  18.             agree:"required"
  19.         },
  20.         messages:{
  21.             name:"<b>Please enter your name</b>",
  22.             phone:{required:"<b>Please enter a phone no.</b>", rangelength: "<b>Your phone no. must consist of 10 digits</b>", digits: "<b>Enter only digits</b>"},
  23.             username:{required: "<b>Please enter a username</b>", minlength: "<b>Your username must consist of at least 2 characters</b>"},
  24.             password:{required: "<b>Please provide a password</b>", minlength: "<b>Your password must be at least 5 characters long</b>"},
  25.             email:"<b>Please enter a valid email address</b>",
  26.             agree:"<b>Please accept our policy</b>"
  27.         }
  28.     });
  29. });
  30. </script>
  31. </head>
  32. <body>
  33.     <form id="signupForm">
  34.         <fieldset><legend>Validating a form using jQuery Validation Plugin</legend>
  35.             <p><label>Name</label><input name="name" type="text" /></p>
  36.             <p><label>Phone</label><input name="phone" type="text" /></p>
  37.             <p><label>Username</label><input name="username" type="text" /></p>
  38.             <p><label>Password</label><input name="password" type="password" /></p>
  39.             <p><label>Email</label><input name="email" type="email" /></p>
  40.             <p><label>Do you agree with our Terms and Conditions?</label><input type="checkbox" name="agree" /></p>
  41.             <p><input type="submit" value="Submit"/></p>
  42.         </fieldset>
  43.     </form>
  44. </body>
  45. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement