In this article I will explain with an example, how to validate HTML Form using jQuery Validation plugin.
This article makes use of jQuery ValidationEngine plugin for performing validation.
jQuery ValidationEngine plugin will perform validation for various Form fields like INPUT TextBox, HTML DropDownList, etc. and the type of validations involved would be Required, Email, Password confirmation, Minimum and Maximum Length, Telephone number, Mobile Cell number, Date Format such as dd/MM/yyyy dates.
Download jQuery ValidationEngine Plugin
You can download the jQuery ValidationEngine plugin using the link below.
HTML Markup
The following HTML Markup consists of an HTML Form.
The HTML Form consists of some INPUT TextBoxes, a HTML DropDownList (SELECT) element and HTML Button.
The INPUT TextBoxes and HTML DropDownList to be validated have been set with the class property. This particular class will be used by jQuery ValidationEngine plugin for validation.
<form id="form1">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td>Please fill the following Form</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Name:</td>
<td><input type="text" id="txtName" class="validate[required]" /></td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Email:</td>
<td><input type="text" id="txtEmail" class="validate[required,custom[email]]" /></td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>City:</td>
<td>
<select id="ddlCities" class="validate[required]">
<option value="">Please Select</option>
<option value="1">Mumbai</option>
<option value="2">Delhi</option>
<option value="3">Kolkatta</option>
<option value="4">Chennai</option>
</select>
</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Password:</td>
<td><input type="password" id="txtPassword" class="validate[required]" /></td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="txtConfirmPassword" class="validate[required,equals[txtPassword]]" /></td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Mobile Phone Number:</td>
<td><input type="text" id="txtPhoneNumber" class="validate[required,custom[integer],maxSize[10],minSize[10]]" /></td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Birth Date (dd/MM/yyyy):</td>
<td><input type="text" id="txtBirthDate" class="validate[required,funcCall[DateFormat[]]" /></td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
Implementing the jQuery ValidationEngine Plugin
First, you need to inherit the jQuery library and jQuery ValidationEngine plugin Scripts and the CSS files on the page.
Then inside the jQuery document ready event handler, the jQuery ValidationEngine plugin is applied to the HTML Form.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
<script type="text/javascript">
$(function () {
$("#form1").validationEngine('attach', { promptPosition: "topRight" });
});
function DateFormat(field, rules, i, options) {
var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
if (!regex.test(field.val())) {
return "Please enter date in dd/MM/yyyy format."
}
}
</script>
Explanation:
Basic Required Validation
For Required validation, the class property is set as validate[required] for the INPUT TextBox and HTML DropDownList elements.
<input type="text" id="txtName" class="validate[required]" />
Note: For the HTML DropDownList element it is necessary that the value for the first or default item is set to blank as shown below.
<select id="ddlCities" class="validate[required]">
<option value="">Please Select</option>
<option value="1">Mumbai</option>
<option value="2">Delhi</option>
<option value="3">Kolkatta</option>
<option value="4">Chennai</option>
</select>
Email Address Validation
For validate a INPUT TextBox that will accept email address as input, the class property is set as validate[required,custom[email]].
This ensures that the INPUT TextBox will contains data and then perform email address validation.
<input type="text" id="txtEmail" class="validate[required,custom[email]]" />
Confirm Password Validation
In order to validate Confirm Password, the class property is set as validate[required,equals[txtPassword]].
The following validation makes sure that the second INPUT TextBox must contain value and the value must be equal to the INPUT TextBox whose ID has been specified along with the equals class.
Note: You will notice that the ID of INPUT TextBox is specified with whom the value needs to be compared.
<input type="password" id="txtPassword" class="validate[required]" />
<input type="password" id="txtConfirmPassword" class="validate[required,equals[txtPassword]]" />
Integer, Numbers (Numeric), Minimum Length, Maximum Length and Phone Validation
jQuery ValidationEngine plugin also provides validation for numbers i.e. numeric data and also the data length must have some minimum and maximum characters.
In order to validate this, the custom, maxSize and minSize need to be specified.
<input type="password" id="txtConfirmPassword" class="validate[required,custom[integer],maxSize[10],minSize[10]]" />
Date Format Validation (dd/MM/yyyy)
jQuery ValidationEngine plugin validates ISO Date format i.e. yyyy-mm-dd.
In order to validate Date with dd/MM/yyyy format, this plugin has provision to add custom validation scripts.
The following custom JavaScript function validates Date with dd/MM/yyyy format and it accepts 4 parameters field, rules, i and options.
Finally, a string message is returned when validation fails.
<script type="text/javascript">
function DateFormat(field, rules, i, options) {
var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
if (!regex.test(field.val())) {
return "Please enter date in dd/MM/yyyy format."
}
}
</script>
Once the function is ready, the class property need to be set as validate[required,funcCall[DateFormat[]].
<input type="text" id="txtBirthDate" class="validate[required,funcCall[DateFormat[]]" />
Screenshot
![Validate HTML Form using jQuery Validation Plugin]()
Demo
Downloads
