1. JavaScript
  2. How To Make Register Form with JQuery Validation

How To Make Register Form with JQuery Validation

Submitted by alpha_luna on Monday, August 3, 2015 - 14:19.
Language
JavaScript

Good Day!!!

In this tutorial, we are going to learn How To Make Register Form with JQuery Validation. This is simple project and it consists firstname, lastname, username, password, confirm password, email and agree for the terms. You can use it to your Website or System.

Directions:

For JQuery Validation

  1. <script>
  2.        
  3.                 $().ready(function() {
  4.         $("#register_form").validate({
  5.             rules: {
  6.                 firstname: "required",
  7.                 lastname: "required",
  8.                 username: {
  9.                     required: true,
  10.                     minlength: 2
  11.                 },
  12.                 password: {
  13.                     required: true,
  14.                     minlength: 5
  15.                 },
  16.                 confirm_password: {
  17.                     required: true,
  18.                     minlength: 5,
  19.                     equalTo: "#password"
  20.                 },
  21.                 email: {
  22.                     required: true,
  23.                     email: true
  24.                 },
  25.                 topic: {
  26.                     required: "#newsletter:checked",
  27.                     minlength: 2
  28.                 },
  29.                 agree: "required"
  30.             },
  31.             messages: {
  32.                 firstname: " <span style='color:red;'>*</span> Enter your firstname",
  33.                 lastname: " <span style='color:red;'>*</span> Enter your lastname",
  34.                 username: {
  35.                     required: " <span style='color:red;'>*</span> Enter a username",
  36.                     minlength: " <span style='color:red;'>*</span> Your username must consist of at least 2 characters"
  37.                 },
  38.                 password: {
  39.                     required: " <span style='color:red;'>*</span> Provide a password",
  40.                     minlength: " <span style='color:red;'>*</span> Your password must be at least 5 characters long"
  41.                 },
  42.                 confirm_password: {
  43.                     required: " <span style='color:red;'>*</span> Confirm your password",
  44.                     minlength: " <span style='color:red;'>*</span> Your password must be at least 5 characters long",
  45.                     equalTo: " <span style='color:red;'>*</span> Enter the same password as above"
  46.                 },
  47.                 email: " <span style='color:red;'>*</span> Enter a valid email address",
  48.                 agree: " <span style='color:red;'>*</span> Agree to our terms"
  49.             }
  50.         });
  51.                 });
  52. </script>

For CSS Code

  1. <style type="text/css">
  2. body {
  3.         margin:0;
  4.         padding:0;
  5.         font-family:"Calibri";
  6. }
  7.  
  8. table {
  9.         border:3px groove #CCC;
  10. }
  11.  
  12. .btn_submit {
  13.         font-size:20px;
  14.         font-weight:bold;
  15.         border-radius:5px;
  16. }
  17.  
  18. .btn_cancel {
  19.         font-size:20px;
  20.         font-weight:bold;
  21.         border-radius:5px;
  22. }
  23.  
  24. input {
  25.         font-size:18px;
  26.         text-indent:4px;
  27. }
  28.  
  29. label {
  30.         color:#0000ff;
  31.         font-size:20px;
  32. }
  33. </style>

For HTML Code

  1. <form id="register_form" method="post">
  2. <table border="1" cellspacing="5" cellpadding="5">
  3.         <tbody>
  4.                 <tr>
  5.                         <td>
  6.                                 <label for="firstname">Firstname</label>
  7.                         </td>
  8.                         <td>
  9.                                 <input id="firstname" name="firstname" placeholder="Firstname..." type="text" />
  10.                         </td>
  11.                 </tr>
  12.                 <tr>
  13.                         <td>
  14.                                 <label for="lastname">Lastname</label>
  15.                         </td>
  16.                         <td>
  17.                                 <input id="lastname" name="lastname" placeholder="Lastname..." type="text" />
  18.                         </td>
  19.                 </tr>
  20.                 <tr>
  21.                         <td>
  22.                                 <label for="username">Username</label>
  23.                         </td>
  24.                         <td>
  25.                                 <input id="username" name="username" placeholder="Username..." type="text" />
  26.                         </td>
  27.                 </tr>
  28.                 <tr>
  29.                         <td>
  30.                                 <label for="password">Password</label>
  31.                         </td>
  32.                         <td>
  33.                                 <input id="password" name="password" placeholder="Password..." type="text" />
  34.                         </td>
  35.                 </tr>
  36.                 <tr>
  37.                         <td>
  38.                                 <label for="confirm_password">Confirm Password</label>
  39.                         </td>
  40.                         <td>
  41.                                 <input id="confirm_password" placeholder="Confirm Password..." name="confirm_password" type="text" />
  42.                         </td>
  43.                 </tr>
  44.                 <tr>
  45.                         <td>
  46.                                 <label for="email">Email</label>
  47.                         </td>
  48.                         <td>
  49.                                 <input id="email" name="email" placeholder="Email..." type="text" />
  50.                         </td>
  51.                 </tr>
  52.                 <tr>
  53.                         <td>
  54.                                 <label for="agree">I Agree To Terms</label>
  55.                         </td>
  56.                         <td>
  57.                                 <input  type="checkbox" class="checkbox" id="agree" name="agree" />
  58.                         </td>
  59.                 </tr>
  60.                 <tr>
  61.                         <td colspan="2" align="center">
  62.                                 <button class="btn_submit" type="submit">Submit</button>
  63.                 <button class="btn_cancel" type="reset">Cancel</button>
  64.                         </td>
  65.                 </tr>
  66.         </tbody>
  68. </form>

Full Source Code

  1. <!DOCTYPE html>
  4. <title>Register Form - j query Validation</title>
  5. <script src="js/jquery-1.8.3.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.validate.min.js"></script>
  8.        
  9.                 $().ready(function() {
  10.         $("#register_form").validate({
  11.             rules: {
  12.                 firstname: "required",
  13.                 lastname: "required",
  14.                 username: {
  15.                     required: true,
  16.                     minlength: 2
  17.                 },
  18.                 password: {
  19.                     required: true,
  20.                     minlength: 5
  21.                 },
  22.                 confirm_password: {
  23.                     required: true,
  24.                     minlength: 5,
  25.                     equalTo: "#password"
  26.                 },
  27.                 email: {
  28.                     required: true,
  29.                     email: true
  30.                 },
  31.                 topic: {
  32.                     required: "#newsletter:checked",
  33.                     minlength: 2
  34.                 },
  35.                 agree: "required"
  36.             },
  37.             messages: {
  38.                 firstname: " <span style='color:red;'>*</span> Enter your firstname",
  39.                 lastname: " <span style='color:red;'>*</span> Enter your lastname",
  40.                 username: {
  41.                     required: " <span style='color:red;'>*</span> Enter a username",
  42.                     minlength: " <span style='color:red;'>*</span> Your username must consist of at least 2 characters"
  43.                 },
  44.                 password: {
  45.                     required: " <span style='color:red;'>*</span> Provide a password",
  46.                     minlength: " <span style='color:red;'>*</span> Your password must be at least 5 characters long"
  47.                 },
  48.                 confirm_password: {
  49.                     required: " <span style='color:red;'>*</span> Confirm your password",
  50.                     minlength: " <span style='color:red;'>*</span> Your password must be at least 5 characters long",
  51.                     equalTo: " <span style='color:red;'>*</span> Enter the same password as above"
  52.                 },
  53.                 email: " <span style='color:red;'>*</span> Enter a valid email address",
  54.                 agree: " <span style='color:red;'>*</span> Agree to our terms"
  55.             }
  56.         });
  57.                 });
  59. <style type="text/css">
  60. body {
  61.         margin:0;
  62.         padding:0;
  63.         font-family:"Calibri";
  64. }
  65.  
  66. table {
  67.         border:3px groove #CCC;
  68. }
  69.  
  70. .btn_submit {
  71.         font-size:20px;
  72.         font-weight:bold;
  73.         border-radius:5px;
  74. }
  75.  
  76. .btn_cancel {
  77.         font-size:20px;
  78.         font-weight:bold;
  79.         border-radius:5px;
  80. }
  81.  
  82. input {
  83.         font-size:18px;
  84.         text-indent:4px;
  85. }
  86.  
  87. label {
  88.         color:#0000ff;
  89.         font-size:20px;
  90. }
  92. </head>
  93.  
  95.  
  96. <form id="register_form" method="post">
  97. <table border="1" cellspacing="5" cellpadding="5">
  98.         <tbody>
  99.                 <tr>
  100.                         <td>
  101.                                 <label for="firstname">Firstname</label>
  102.                         </td>
  103.                         <td>
  104.                                 <input id="firstname" name="firstname" placeholder="Firstname..." type="text" />
  105.                         </td>
  106.                 </tr>
  107.                 <tr>
  108.                         <td>
  109.                                 <label for="lastname">Lastname</label>
  110.                         </td>
  111.                         <td>
  112.                                 <input id="lastname" name="lastname" placeholder="Lastname..." type="text" />
  113.                         </td>
  114.                 </tr>
  115.                 <tr>
  116.                         <td>
  117.                                 <label for="username">Username</label>
  118.                         </td>
  119.                         <td>
  120.                                 <input id="username" name="username" placeholder="Username..." type="text" />
  121.                         </td>
  122.                 </tr>
  123.                 <tr>
  124.                         <td>
  125.                                 <label for="password">Password</label>
  126.                         </td>
  127.                         <td>
  128.                                 <input id="password" name="password" placeholder="Password..." type="text" />
  129.                         </td>
  130.                 </tr>
  131.                 <tr>
  132.                         <td>
  133.                                 <label for="confirm_password">Confirm Password</label>
  134.                         </td>
  135.                         <td>
  136.                                 <input id="confirm_password" placeholder="Confirm Password..." name="confirm_password" type="text" />
  137.                         </td>
  138.                 </tr>
  139.                 <tr>
  140.                         <td>
  141.                                 <label for="email">Email</label>
  142.                         </td>
  143.                         <td>
  144.                                 <input id="email" name="email" placeholder="Email..." type="text" />
  145.                         </td>
  146.                 </tr>
  147.                 <tr>
  148.                         <td>
  149.                                 <label for="agree">I Agree To Terms</label>
  150.                         </td>
  151.                         <td>
  152.                                 <input  type="checkbox" class="checkbox" id="agree" name="agree" />
  153.                         </td>
  154.                 </tr>
  155.                 <tr>
  156.                         <td colspan="2" align="center">
  157.                                 <button class="btn_submit" type="submit">Submit</button>
  158.                 <button class="btn_cancel" type="reset">Cancel</button>
  159.                         </td>
  160.                 </tr>
  161.         </tbody>
  163. </form>
  164.  
  165. </body>
  166. </html>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
jQuery
php
Register

Comments

Submitted by akashmalik on Mon, 08/03/2015 - 18:25

can you attach with it ms acccess in which after click on the submit all the data saved and clear all the entry from form and give one msg for save the data

Add new comment

About text formats