The jQuery validate plug-in for HTML forms
The form validation is generally required when using the web forms in your web pages. For example, checking the correct email format, password and re-enter password matching, name, age, etc field values (if any are mandatory).
In the early days, you had to write a lot of code of JavaScript for client-side validation or server-side validation by using PHP, ASP.net, etc.
In this tutorial, I am going to show you a jQuery-based form validation plug-in that allows you to check not only the required fields but also email validation, and the limit of characters, and may also compare two fields.
A demo of basic form validation by jQuery
In this jQuery form validation example, three form fields are checked whether these are filled or not. Although the email field is also used, however, its format is not checked. It only checks for a character entry. For email validation example, see next examples.
Also note, for all the examples, Bootstrap framework is used for creating the forms. You may use your own custom CSS for creating forms as using this plug-in.
Online demo and code
For setting up this jQuery validate form plug-in, you need to include a few resources in the <head> and before the </body> tag.
First of all, include the Bootstrap and style CSS files that come up with the plug-in. You may download the plug-in from the Github website here. Alternatively, view source the demo page and find the required files and save in your system.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<link rel=”stylesheet” type=”text/css” href=”css/bsvalidate/style.css”>
The markup containing the form and using required ID:
<div id="form-validation-demo" > <h2>A demo of form validation</h2> <div id="form-demo"> <form id="simpleForm" action="saveinfo.php" method="post" class="well"> <div class="form-group"> <label class="control-label">Enter Your Name</label> <input type="text" name="name" class="form-control required" /> </div> <div class="form-group"> <label class="control-label">Enter Email</label> <input type="text" name="email" class="form-control" required /> </div> <div class="checkbox form-group"> <label> <input type="checkbox" name="confirm" class="required" /> Checkbox Must be checked </label> </div> <div class="form-group"> <input type="submit" class="btn btn-success" value="Save info" /> </div> </form> </div> </div>
Just above the </body> tag, place the references to the jQuery, Bootstrap, and plug-in JS files:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
<script type=”text/javascript” src=”js/bsvalidate/jquery.bsvalidate.js”></script>
<script type=”text/javascript” src=”js/bsvalidate/main.js”></script>
The main.js file contains the specification related to demos. You may change this if you want to use some other IDs, alert messages etc.
A demo of validating email
In this example, not only the emptiness of email field is checked but its format as well. A user must enter the “@” and “.” with certain characters in order to proceed. You may show any custom message for incorrect entry. Give it a try:
The markup/jQuery used in the example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bsvalidate/style.css">
</head>
<body>
<div class="container">
<div class="section">
<h2>A demo of validating email</h2>
<div>
<div>
<div id="validate-email-demo">
<form id="customMessagesForm" action="validate.php" method="post" class="well">
<div class="form-group">
<label class="control-label">Enter Email</label>
<input type="text" name="email" class="form-control" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bsvalidate/jquery.bsvalidate.js"></script>
<script type="text/javascript" src="js/bsvalidate/main.js"></script>
</body>
</html>
A demo of showing custom error messages
You may also show custom messages as you want while using this validate jQuery plug-in. For that, you need to access the main.js file and change/add any messages for respective form fields. Have a look at the following demo where different form fields are used.
The Name and Email fields are mandatory while if website format is incorrect, it will display the alert message. Just like above example, the format of the email is checked. In addition to the validating the email address, the re-enter email field is also checked for entry as well as matching the two email addresses.
Have a look:
Online demo and code
The markup used:
<div id="demo-of-custom-msgs" class="section"> <h2>A demo with custom messages</h2> <div> <div> <div id="customMessagesExampleDemo"> <form id="customMessagesForm" action="saveinfo.aspx" method="post" class="well"> <div class="form-group"> <label class="control-label">Enter Your Name</label> <input type="text" name="name" class="form-control" /> </div> <div class="form-group"> <label class="control-label">Enter Email</label> <input type="text" name="email" class="form-control" /> </div> <div class="form-group"> <label class="control-label">Please Confirm Email</label> <input type="text" name="emailConfirm" class="form-control" /> </div> <div class="form-group"> <label class="control-label">Your Website</label> <input type="text" name="website" class="form-control" /> </div> <div class="form-group"> <input type="submit" class="btn btn-danger" value="Save Info" /> </div> </form> </div> </div> </div> </div>
Make sure to use the same ID (customMessagesForm) in the <form> field as it is used in the main.js file. If you intend to use another then change this in the main.js file as well.
The demo of filling at least one field check
In this example, the check is to validate at least one form field is filled from two or more text boxes. Four text fields are given and if all are left blank, the error message will display stating that “Enter at least one field”.
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bsvalidate/style.css">
</head>
<body>
<div class="container">
<div id="demo-one-field" class="section">
<h2>Fill one field at least</h2>
<div>
<div>
<div id="atLeastOneExampleDemo">
<form id="atLeastOneForm" action="success.html" method="post" class="well">
<div class="form-group">
<label class="control-label">Textbox 1</label>
<input type="text" name="field1" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Textbox 2</label>
<input type="text" name="field2" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Textbox 3</label>
<input type="text" name="field3" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Textbox 4</label>
<input type="text" name="field4" class="form-control" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-danger" value="Validate" />
</div>
</form>
</div>
</div>
</div>
</div><!-- #atLeastOneExample -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bsvalidate/jquery.bsvalidate.js"></script>
<script type="text/javascript" src="js/bsvalidate/main.js"></script>
</body>
</html>