Validation

The DevExpress ASP.NET MVC VerticalGrid extension supports a model-based data validation approach, which is implemented in the ASP.NET MVC framework. This approach is based on decorating model class properties with the DataAnnotations attributes and jQuery Validation. You can learn more about unobtrusive client validation from the following blog post: Unobtrusive Client Validation in ASP.NET MVC 3.

Adding validation rules to the model class

To define validation rules for user input, add the required DataAnnotation attributes to the corresponding model class properties. You can learn more about DataAnnotation attribute usage in ASP.NET MVC validation in the following blog post: How data annotations for ASP.NET MVC validation work.

The code sample below demonstrates how to add the DataAnnotation attributes to the model class properties.

When an end-user submits data, the VerticalGrid sends a callback to the server, and the server validates user input. If user input is valid, data will be added to the data source. Otherwise, an error message will be displayed next to the VerticalGrid editor containing invalid data.

Enabling Unobtrusive Client Validation

With the steps described above, your application only performs server-side validation. In addition to server-side validation, you can enable client-side validation functionality. Client-side validation allows you to immediately validate user input without sending a callback to the server.

Client-side validation requires that you include the jquery-3.*.*.min.js, jquery.validate.min.js and jquery.validate.unobtrusive.min.js JavaScript references in your layout page (or in certain views that contain validation forms).

The code sample below demonstrates how to include the required JavaScript references.

The DevExpress ASP.NET MVC Data Editors have the ShowModelErrors property, which allows (when enabled) error messages to automatically be displayed within invalid editors when validation fails. The DevExpress ASP.NET MVC Data Editors provide their own placeholder for rendering validation error messages. Using a built-in error message placeholder allows you to flexibly control how errors should be displayed within editors by using settings exposed using the editor ValidationSettings property, such as ValidationSettings.ErrorDisplayMode.