Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Collapse]Data Editors Extensions
    Editor List
    Main Features
   [Collapse]Common Concepts
     Binding Data Editors to Data
     Getting Editor Values
     Mask Editing
    [Collapse]Validation
      Validation Overview
      Model Validation
      Unobtrusive Client Validation
      jQuery Client Validation
      Built-in Validation
      Remote Validation
      Displaying Validation Error Messages
      Validating Dynamically Loaded Forms
     Accessibility Support
   [Expand]Editor Types
   [Expand]Strongly-Typed Editor Types
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Unobtrusive Client Validation

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:

Expanded 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.

Expanded 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.

You can see the rendered result in the image below.

Expanded 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).

Razor v2 (which is used in MVC 4) allows you to add the same script references in the following way:

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.

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

View code (Razor):

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.

Expanded See Also

Is this topic helpful?​​​​​​​