jQuery Client Validation
- 3 minutes to read
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
Razor v2 (which is used in MVC 4) allows you to add the same script references in the following way.
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 (http://jqueryvalidation.org/documentation)
The code sample below demonstrates how to define jQuery Validation methods for a data editor.
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).
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.
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.