jQuery Client Validation
- 3 minutes to read
ASP.NET MVC supports client side validation that is based on the jQuery Validation plugin. Client side validation can be performed directly using the jQuery javascript library without ASP.NET MVC resources. The jQuery Validation plugin validates the form before it is submitted: if the form is not valid, it won’t be submitted.
Important
jQuery Validation requires your input data editors to be inside of a <form> element in order to be validated.
DevExpress MVC data editors support jQuery based client-side validation.
To implement user-input validation within DevExpress MVC Data Editors, perform the following steps.
Including JS references
The jQuery Validation requires the jquery-3...min.js and jquery.validate.min.js JavaScript references to be included to your layout or master page (or to a certain views that contain validating forms).
The code sample below demonstrates how to include the required javascript references (using Razor View Engine in MVC 3).
<script src="@Url.Content("~/Scripts/jquery-3.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
Razor v2 (which is used in MVC 4) allows you to add the same script references in the following way.
<script src="~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
Important
The JavaScript references should be added in the order they are specified in the code sample above.
Setting jQuery validation attributes
The JQuery Validation plugin provides you with a number of built-in standard validation methods. Follow this link to learn more about built-in validation methods: List of built-in Validation methods (https://jqueryvalidation.org/documentation/)
The code sample below demonstrates how to define jQuery Validation methods for a data editor.
<script type="text/javascript">
// <![CDATA[
$().ready(function () {
$("#validationForm").validate({
rules: {
FirstName: {
required: true,
maxlength: 10,
minlength: 3
},
...
}
messages: {
FirstName: {
required: "First name is required",
maxlength: "Too long",
minlength: "Too short"
},
...
}
});
});
// ]]>
</script>
Important
The jQuery Validation rules do not work if the jQuery.Validate.Unobtrusive plugin is attached. This plugin is automatically attached if the “resources” section of the Web.config file has a reference to “ThirdParty” libraries.
<devExpress>
<!-- ... -->
<resources>
<add type="ThirdParty" />
<add type="DevExtreme" />
</resources>
</devExpress>
jQuery client validation will work if the required client libraries are manually attached (and an empty “resources” section is declared in the Web.config).
<resources>
</resources>
Displaying validation error messages
You have the ability to use different approaches to displaying validation error messages: standard ValidationMessageFor() method, DevExpress MVC editors specific placeholder and DevExpress Validation Summary. You can find these approaches described here: Displaying Validation Error Messages.
Note
The standard ValidationSummary() method doesn’t allow you to render error placeholders if you use jQuery Client Validation approach. In this case, you can use the DevExpress ValidationSummary MVC Extension that renders jQuery Client Validation errors correctly.