Responsive Form Validation

Submitted by rinvizle on Wednesday, July 27, 2016 - 17:01.
This tutorial we will create a Responsive Form Validation that we will show you how to integrate client side responsove form validation using jQuery validation. The client side of responsive form validation is very useful for validating a form and it makes your web project more user friendly. You can found many ways to perform client side validation in HTML form, but jQuery validation is the easiest way to validate a form. The jQuery validation plugin lets you implement form validation instantly with many customization options. Responsive form validation code will help you to use custom validation rules and messages. We will show you a script how registration form validation works with different rules and custom messages.

Sample Code

Index.html The user registration form HTML which is validated with jQuery Validation 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>Responsive Form Validation</title>
  5. 	<script src="style/style.css"></script>
  6. 	<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  7. 	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  8. 	<script src="style/jquery.min.js"></script>
  9. 	<script src="style/jquery.validate.js"></script>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <h1>&nbspResponsive Form Validation</h1>
  14. <form class="form-group" id="userForm" method="post" action="">
  15.         <legend>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Please Fill In The Following Details</legend>
  16.         <p>
  17.             <label for="name">Name :</label>
  18.             <input id="name" class="form-control" name="name" type="text" placeholder="Name" >
  19.         </p>
  20.         <p>
  21.             <label for="email">E-Mail Address :</label>
  22.             <input id="email" class="form-control" type="email" name="email" placeholder="E-Mail Address" >
  23.         </p>
  24.         <p>
  25.             <label for="phone">Phone Number :</label>
  26.             <input id="phone" class="form-control" type="phone" name="phone" placeholder="Phone Number" >
  27.         </p>
  28.         <p>
  29.             <label for="username">Username :</label>
  30.             <input id="username" class="form-control" name="username" type="text" placeholder="Username" >
  31.         </p>
  32.         <p>
  33.             <label for="password">Password :</label>
  34.             <input id="password" class="form-control" name="password" type="password" placeholder="Password" >
  35.         </p>
  36.         <p>
  37.             <label for="confirm_password">Confirm Password :</label>
  38.             <input id="confirm_password" class="form-control" name="confirm_password" type="password" placeholder="Confirm Password" >
  39.         </p>
  40.         <p>
  41.             <label for="agree">By Clicking Sign Up button, you agree to our Terms and Agreement.</label>
  42.             <input type="checkbox" class="checkbox" id="agree" name="agree">
  43.         </p>
  44.         <p>
  45.             <input class="btn btn-primary" type="submit" value="Submit">
  46.         </p>
  47. </form>
  48. </div>
  49. </body>
  50. </html>
resultAnd For the jQuery script for the function for the rules and messages. 
  1. <script>
  2. $.validator.setDefaults({
  3.     submitHandler: function() {
  4.         alert("submitted!");
  5.     }
  6. });
  7.  
  8. $(document).ready(function() {
  9.     $("#userForm").validate({
  10.         rules: {
  11.             name: "required",
  12.             email: {
  13.                 required: true,
  14.                 email: true
  15.             },
  16.             phone: {
  17.                 required: true,
  18.                 number: true
  19.             },
  20.             username: {
  21.                 required: true,
  22.                 minlength: 6
  23.             },
  24.             password: {
  25.                 required: true,
  26.                 minlength: 6
  27.             },
  28.             confirm_password: {
  29.                 required: true,
  30.                 minlength: 6,
  31.                 equalTo: "#password"
  32.             },
  33.             agree: "required"
  34.         },
  35.         messages: {
  36.             name: "Please Fill Up Your Name",
  37.             email: "Please Enter a Valid Email Address",
  38.             phone: {
  39.                 required: "Please Enter Your Phone Number",
  40.                 number: "Please Enter Only Numeric Value"
  41.             },
  42.             username: {
  43.                 required: "Please Enter a Username",
  44.                 minlength: "Your Username Must Consist of at Least 6 Characters"
  45.             },
  46.             password: {
  47.                 required: "Please Provide a Password",
  48.                 minlength: "Your Password Must Be at Least 6 Characters Long"
  49.             },
  50.             confirm_password: {
  51.                 required: "Please Provide a Password",
  52.                 minlength: "Your Password Must Be at Least 6 Characters Long",
  53.                 equalTo: "Please Enter The Same Password As Above"
  54.             },
  55. 			agree: "Please Accept Policy & Agreement"
  56.         }
  57.     });
  58. });
  59. </script>
Hope that you learn in this project and enjoy coding. Don't forget to LIKE & SHARE this website.

Tags

Add new comment

About text formats
  • 691 views