Welcome folks today in this blog post we will be validating the html5 form using the jquery validate plugin in browser using jquery in bootstrap 4 using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
First of all we need to include the jquery validate plugin library cdn as shown below. And also we need to include the bootstrap 4 cdn and jquery cdn as well.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/ 4.0.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"> </script> <style> .error { margin-top: 10px; color: red } </style> </head> <body> <!-- Including app.js jQuery Script --> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script> <script src="app.js"></script> </body> </html> |
As you can see we have included all the libraries cdn which include the jquery validate , bootstrap and jquery.
Adding the HTML5 Form Fields
Now we will be adding the different html5 form fields to build the registration form. This include the different fields such as username , email, password & confirm password fields and a submit button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<br> <p class="text-center"> Form Validation Using jQuery </p> <div class="container"> <div class="col-lg-8 m-auto d-block"> <form autocomplete="off" id="form"> <div class="form-group"> <label for="user"> Username: </label> <input type="text" minlength="5" required name="username" id="username" class="form-control"> </div> <div class="form-group"> <label for="email"> Email: </label> <input type="email" minlength="5" required name="email" id="email" class="form-control"> </div> <div class="form-group"> <label for="password"> Password: </label> <input required type="password" minlength="5" maxlength="20" name="password" id="password" class="form-control"> </div> <div class="form-group"> <label for="conpassword"> Confirm Password: </label> <input required type="password" name="conpassword" id="conpassword" class="form-control"> </div> <input type="submit" id="submitbtn" value="Submit" class="btn btn-primary"> </form> </div> </div> |
As you can see we are attaching the bootstrap 4 form fields using the bootstrap 4 classes. And also we have different form fields. And also we are attaching the form fields.
Initializing the jQuery Form Validate Plugin
Now we will be initializing the jquery Form Validate Plugin to validate the html5 form fields. We have included the jquery cdn and also the library of jquery validate cdn.
|
1 2 3 4 5 6 7 8 |
$("#form").validate({ rules:{ // define the form validation rules }, messages:{ // define the form validation messages } }) |
As you can see we are first of all getting the reference of the form using it’s id and then we are invoking the method of validate() and we are passing the object which contains the options which include the rules and messages of this form validation. Rules is basically an object which declares the various conditions for the html5 form fields. And then messages is also an object which define the different error messages for different html5 form fields.
Attaching the Validations to HTML5 Form Fields
Username Validation
Now first of all we will be attaching the validation rules and displaying the error messages for the username input field as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#form").validate({ rules:{ username:{ required:true, minlength:5 } messages:{ username:{ required:"Please enter the username", minlength:"Username must be at least 5 characters" } } }) |
As you can see we are attaching the required property and minLength property to the username input fields. Require simply means you need to write this value and minLength simply means you need to write at least 5 characters in this case. It takes the numeric value. And now in the messages as you can see we are displaying the error messages which will be displaying once the user doesn’t fulfill the conditions of username.
Email Validation
Now first of all we will be attaching the validation rules and displaying the error messages for the email input field as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$("#form").validate({ rules:{ email:{ required:true, email:true } }, messages:{ email:{ required:"Please enter the email", email:"Please enter a valid email" } } }) |
As you can see we are attaching the required property and email property to the email input fields. Require simply means you need to write this value and email property simply means you need to write a valid email. It takes the boolean value. And now in the messages as you can see we are displaying the error messages which will be displaying once the user doesn’t fulfill the conditions of email.
Password & Confirm Password Validation
Now first of all we will be attaching the validation rules and displaying the error messages for the password and confirm password input fields as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$("#form").validate({ rules:{ password:{ required:true, minlength:5 }, conpassword:{ required:true, minlength:5, equalTo:"#password" } }, messages:{ password:{ required:"Please enter the password", minlength:"Password must be at least 5 characters" }, conpassword:{ required:"Please enter the password", minlength:"Password must be at least 5 characters", equalTo:"Your password's don't match with each other" } } }) |
As you can see we are attaching the required property and minLength & equalTo property to the password and confirm password input fields. Require simply means you need to write this value and minLength property simply means you need to write atleast 5 characters for the password and confirm password and equalTo is only attached to confirm password field which simply means that password and confirm password doesn’t match with each other. And now in the messages as you can see we are displaying the error messages which will be displaying once the user doesn’t fulfill the conditions of password and confirm password fields.
Full Source Code
Now wrapping this post this is the full source code of the index.html file (along with javascript code) as shown below
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/ 4.0.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"> </script> <style> .error { margin-top: 10px; color: red } </style> </head> <body><br> <p class="text-center"> Form Validation Using jQuery </p> <div class="container"> <div class="col-lg-8 m-auto d-block"> <form autocomplete="off" id="form"> <div class="form-group"> <label for="user"> Username: </label> <input type="text" minlength="5" required name="username" id="username" class="form-control"> </div> <div class="form-group"> <label for="email"> Email: </label> <input type="email" minlength="5" required name="email" id="email" class="form-control"> </div> <div class="form-group"> <label for="password"> Password: </label> <input required type="password" minlength="5" maxlength="20" name="password" id="password" class="form-control"> </div> <div class="form-group"> <label for="conpassword"> Confirm Password: </label> <input required type="password" name="conpassword" id="conpassword" class="form-control"> </div> <input type="submit" id="submitbtn" value="Submit" class="btn btn-primary"> </form> </div> </div> <!-- Including app.js jQuery Script --> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script> <script> $("#form").validate({ rules:{ username:{ required:true, minlength:5 }, email:{ required:true, email:true }, password:{ required:true, minlength:5 }, conpassword:{ required:true, minlength:5, equalTo:"#password" } }, messages:{ username:{ required:"Please enter the username", minlength:"Username must be at least 5 characters" }, email:{ required:"Please enter the email", email:"Please enter a valid email" }, password:{ required:"Please enter the password", minlength:"Password must be at least 5 characters" }, conpassword:{ required:"Please enter the password", minlength:"Password must be at least 5 characters", equalTo:"Your password's don't match with each other" } } }) </script> </body> </html> |
