Overview

NOTE
Currently, DevExtreme ASP.NET MVC Wrappers are in the Release Candidate (RC) status, meaning that although this product is stable, significant bugs may emerge. In case you find one, please report to our Support Center.

Client-side data validation allows you to validate input values before sending them to the server, and therefore, without reloading the page. DevExtreme ASP.NET MVC Wrappers validate input values using the Data Annotation validation attributes of model properties. The following validation attributes are supported.

  • [Required]
  • [StringLength]
  • [Range]
  • [RegularExpression]
  • [Compare]
  • [Custom]

Model properties that have one or several of these attributes can be validated. For example, suppose that a Person model contains a FirstName property that has three validation attributes.

using System.ComponentModel.DataAnnotations;

namespace ApplicationName.Models {
    public class Person {
        [Required(ErrorMessage = "First name is required")]
        [RegularExpression(@"^[a-zA-Z\s]+$", ErrorMessage = "Do not use digits in the first name")]
        [StringLength(int.MaxValue, MinimumLength = 2, ErrorMessage = "First name must have at least 2 symbols")]
        public string FirstName { get; set; }
    }
}

To apply these validation attributes to a DevExtreme editor, simply bind this editor to the model property using the Name method. In the following code, the DevExtreme TextBox widget plays the role of the editor.

@model ApplicationName.Models.Person

@(Html.DevExtreme().TextBox()
    .Name("FirstName")
    .Value(Model.FirstName)
)
NOTE
For the RangeSlider widget, use the StartName and EndName methods instead of the Name method.

By default, the input value is validated each time the change event is raised. To change the DOM event that triggers validation, set the valueChangeEvent option.

@(Html.DevExtreme().TextBox()
    .Name("FirstName")
    .Value(Model.FirstName)
    .ValueChangeEvent("keyup")
)
NOTE
If the [Range] attribute should limit a date or time range, use the RangeAttribute overload that accepts type as the first argument. The date/time values must be set as strings. See an example in the following code.
namespace ApplicationName.Models {
    public class Person {
        // ...
        [Range(typeof(DateTime), "1/1/1901", "1/1/2016")]
        public DateTime BirthDate { get; set; }
    }
}    
See Also