Unobtrusive Client Validation

• Mar 12, 2021
• 4 minutes to read

DevExpress MVC data editors support an unobtrusive client validation approach which is implemented in ASP.NET MVC 3 and higher. This approach implies decorating model class properties with the DataAnnotations attributes and jQuery Validation. You can learn more about unobtrusive client validation from the Unobtrusive Client Validation in ASP.NET MVC 3 blog post.

Note

Built-in Validation is not performed when specifying validation attributes for a model class properties (Unobtrusive Client Validation).

This topic describes how to add a validity check to the DevExpress MVC data editors.

Perform the following steps to implement unobtrusive validation within DevExpress MVC Data Editors:

• Adding validation rules to the model class
• Validation specific settings for data editors
• Enable client-side validation

Adding validation rules to the model class

To define validation rules for user input, add the DataAnnotation attributes to the required 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 the How data annotations for ASP.NET MVC validation work blog post.

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

C#

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 can 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. These approaches are described in Displaying Validation Error Messages.

Additional requirements

Note that the editor’s Name property value must match the related data model class property name.

For validation, the ASP.NET MVC Framework requires that input data editors are inside a <form> element that can be rendered with Html.BeginForm().

Example

The code sample below demonstrates how to configure the TextBox extension to render the validation error message in a built-in placeholder.

C#

@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 image below.

Enabling client-side validation

After the previous steps, your application only performs server-side validation. End users need to submit a form to the server before validation error messages are displayed.

In addition to server-side validation, you can enable client-side validation functionality.

The client-side validation requires jquery-3...min.js, jquery.validate.min.js and jquery.validate.unobtrusive.min.js JavaScript references to be included in your layout or master page (or particular views that contain validating forms).

The code sample below demonstrates how to include the required javascript references (using the Razor View Engine in MVC 3).

ASPX

<script src="@Url.Content("~/Scripts/jquery-3.3.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.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:

ASPX

<script src="~/Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Note

The JavaScript references should be added in the order they are specified in the code samples above.

To enable client-side validation for all pages in your project, add a key to web.config.

XML

...
<configuration>
    <appSettings>
        <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>
</configuration>
...

You can add the following code to a view to enable the client-side validation functionality for this view only:

View code (Razor):

C#

@{
    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();
}

Note

The unobtrusive client validation script parses loaded DOM searching for forms with input fields that are decorated with validation attributes. The parsing is only performed after the initial page load- forms that were loaded via callbacks after the page load are not parsed. See the Validating Dynamically Loaded Forms topic to learn how to validate forms that were loaded via callbacks.