In this article I will explain with an example, how to validate HTML Form using jQuery Validation plugin in ASP.Net MVC.
This article makes use of jQuery ValidationEngine plugin for performing validation.
jQuery ValidationEngine plugin will perform validation for various Form fields like TextBox, 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.
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method is executed when the Submit button is clicked.
Inside this Action Method, RedirectToAction method is called which redirects to the Index Action method.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Export()
{
return RedirectToAction("Index");
}
}
View
The View consists of a HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Submit.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of some TextBoxes, a DropDownList created using the Html.TextBox and Html.DropDownList function.
There’s also a Submit Button at the end of the Form.
The TextBoxes and DropDownList to be validated have been set with the class property. This particular class will be used by jQuery ValidationEngine plugin for validation.
Explanation:
Basic Required Validation
For Required validation, the class property is set as validate[required] for the TextBox or DropDownList controls.
Note: For the DropDownList control it is necessary that the value for the first or default item is set to blank.
Email Address Validation
For validating a TextBox that will accept email address as input, the class property is set as validate[required,custom[email]].
This ensures that the TextBox will contains data and then perform email address validation.
Confirm Password Validation
In order to validate Confirm Password, the class property is set as validate[required,equals[txtPassword]].
The validation makes sure that the second TextBox must contain value and the value must be equal to the TextBox whose ID has been specified along with the equals class.
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.
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.
Implementing the jQuery ValidationEngine Plugin
First, you need to inherit the jQuery library and jQuery ValidationEngine plugin Scripts and the CSS files on the View.
Then inside the jQuery document ready event handler, the jQuery ValidationEngine plugin is applied to the Form.
There is a JavaScript function DateFormat which validates Date with dd/MM/yyyy format and it accepts 4 parameters field, rules, i and options.
Finally, a string message is returned from the DateFormat JavaScript function when validation fails.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
input, select { width: 150px; }
</style>
<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>
</head>
<body>
@using (Html.BeginForm("Submit", "Home", FormMethod.Post, new { 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>@Html.TextBox("txtName", "", new { @class = "validate[required]" })</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Email:</td>
<td>@Html.TextBox("txtEmail", "", new { @class = "validate[required,custom[email]]" })</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>City:</td>
<td>
@Html.DropDownList("ddlCities", new List<SelectListItem>
{
new SelectListItem{ Text="Please Select", Value="" },
new SelectListItem{ Text="Mumbai", Value="1" },
new SelectListItem{ Text="Delhi", Value="2" },
new SelectListItem{ Text="Kolkatta", Value="3" },
new SelectListItem{ Text="Chennai", Value="4" }
}, new { @class = "validate[required]" })
</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Password:</td>
<td>@Html.Password("txtPassword", "", new { @class = "validate[required]" })</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Confirm Password:</td>
<td>@Html.Password("txtConfirmPassword", "", new { @class = "validate[required,equals[txtPassword]]" })</td>
</tr>
<tr><td style="height: 40px"></td></tr>
<tr>
<td>Mobile Phone Number:</td>
<td>@Html.TextBox("txtPhoneNumber", "", new { @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>@Html.TextBox("txtBirthDate", "", new { @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>
}
</body>
</html>
Screenshot
![ASP.Net MVC: Validate Form using jQuery Validation Plugin]()
Downloads
