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
j
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 Java
#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 j
<devExpress>
<!-- ... -->
<resources>
<add type="ThirdParty" />
<add type="DevExtreme" />
</resources>
</devExpress>
j
<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 Validation