Advertisement
varungurnaney

Form Validation using JQuery

Apr 16th, 2014
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 2.36 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