Model Validation
- 4 minutes to read
DevExpress MVC data editors support a model-based data validation approach which is implemented in ASP.NET MVC 2 and 3. This approach is based on decorating model class properties with the DataAnnotations attributes. You can learn more about model validation from this blog post: ASP.NET MVC 2: Model Validation.
This topic describes how to add a validity check to the DevExpress MVC data editors.
To implement user-input validation within DevExpress MVC Data Editors, you need to perform the following steps.
- Adding Validation Rules to the Model Class
- Validation-Specific Settings for Data Editors
- Enabling Client-Side Validation
Adding Validation Rules to the Model Class
To define validation rules for the user input, add the required DataAnnotation attributes to the respected model class properties. Server-side validation is automatically enabled when data annotations are added. You can learn more about DataAnnotation attributes usage in ASP.NET MVC validation from this blog post: How data annotations for ASP.NET MVC validation work.
using System.ComponentModel.DataAnnotations;
namespace Validation.Models {
public class Clients {
[Required(ErrorMessage = "First name is required")]
[StringLength(15, ErrorMessage = "Must be under 15 characters")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Email is required")]
[EmailAddress(ErrorMessage = "Email is invalid")]
public string Email { get; set; }
[Required(ErrorMessage = "Age is required")]
public int Age { get; set; }
}
}
Validation-Specific Settings for Data Editors
Displaying Validation Error Messages.
You have the ability to use different approaches to display validation error messages: standard ValidationMessageFor() and ValidationSummary() methods, the DevExpress MVC editors built-in placeholder and DevExpress MVC Validation Summary. You can find these approaches described here: Displaying Validation Error Messages.
Additional requirements.
Note that the editor’s Name property value must match the related data model class property name.
The ASP.NET MVC Framework requires your input data editors to be inside of a <form> element that should be rendered with Html.BeginForm() in order to be validated.
Example.
The code sample below demonstrates how you can configure the TextBox extension to render the validation error message within a built-in placeholder.
@using (Html.BeginForm()) {
...
@Html.DevExpress().TextBox(
settings => {
settings.Name = "FirstName";
settings.ShowModelErrors = true;
settings.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithText;
}).Bind(Model.FirstName).GetHtml()
...
}
You can see the rendered result in the picture below.
Enabling Client-Side Validation
After the previous steps, your application only performs server-side validation: end users will need to submit a form to the server before they will see a validation error messages.
In addition to server-side validation, you can enable client-side validation functionality.
The client-side validation requires MicrosoftAjax.min.js, MicrosoftMvcAjax.min.js and MicrosoftMvcValidation.min.js JavaScript references to be included in 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.
<script src="@Url.Content("~/Scripts/MicrosoftAjax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.min.js")" type="text/javascript"></script>
Note
The JavaScript references should be added in the order they are specified in the code sample above.
To enable client-side validation for all pages in your project, add a key to web.config.
...
<appSettings>
<add key="ClientValidationEnabled" value="true" />
</appSettings>
...
To enable the client-side validation functionality for a specific view only, you can add the following code to the required view.
@Html.EnableClientValidation()
Note
The model validation script parses loaded DOM searching for forms that contain validation metadata. The parsing is only done after the initial page load, so the forms that were loaded via callbacks after the page load are not parsed. See this topic to learn how to validate forms that were loaded via callbacks: Validating Dynamically Loaded Forms.