DevExtreme Vue - Overview

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

  • [Required]
  • [StringLength]
  • [Range]
  • [RegularExpression]
  • [Compare]
  • [Display] *
  • [DisplayName] *
  • [Custom]
* - Supported only for controls configured using strongly-typed helpers.
NOTE
We also provide the [DevExtremeRequired] attribute that adopts the HTML5 validation behavior: it considers false an invalid Boolean value, whereas the standard [Required] accepts both true and false. You can find more details in this blog post.

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

C#
VB
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; }
    }
}
Imports 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(Integer.MaxValue, MinimumLength:=2, ErrorMessage:="First name must have at least 2 symbols")>
        Public Property FirstName() As String
    End Class
End Namespace

To apply these validation attributes to a DevExtreme editor, create this editor using a EditorFor method. Substitute "Editor" in EditorFor with the editor's name. For example, to create the DevExtreme TextBox editor, call the TextBoxFor method:

Razor C#
Razor VB
@model ApplicationName.Models.Person

@(Html.DevExtreme().TextBoxFor(model => model.FirstName))
@ModelType ApplicationName.Models.Person

@(Html.DevExtreme().TextBoxFor(Function(model) model.FirstName))

As an alternative, you can use a more explicit syntax for binding an editor to a model property and applying validation attributes. Pass the property's name to the Name method and an initial value to the Value method. The previous and following code samples produce the same result:

Razor C#
Razor VB
@model ApplicationName.Models.Person

@(Html.DevExtreme().TextBox()
    .Name("FirstName")
    .Value(Model.FirstName)
)
@ModelType ApplicationName.Models.Person

@(Html.DevExtreme().TextBox() _
    .Name("FirstName") _
    .Value(Model.FirstName)
)
NOTE
Use the StartName and EndName methods instead of the Name method for the RangeSlider control.

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

Razor C#
Razor VB
@(Html.DevExtreme().TextBoxFor(model => model.FirstName)
    .ValueChangeEvent("keyup")
)
@(Html.DevExtreme().TextBoxFor(Function(model) model.FirstName) _
    .ValueChangeEvent("keyup")
)
NOTE

If the [Range] attribute should limit a date or time range, use the RangeAttribute overload that accepts a type as the first argument. The date/time values must be set as strings. See an example in the following code:

C#
VB
namespace ApplicationName.Models {
    public class Person {
        // ...
        [Range(typeof(DateTime), "1/1/1901", "1/1/2016")]
        public DateTime BirthDate { get; set; }
    }
}
Imports System.ComponentModel.DataAnnotations

Namespace Models
    Public Class Person
        ' ...
        <Range(GetType(DateTime), "1/1/1901", "1/1/2016")>
        Public Property BirthDate() As DateTime
    End Class
End Namespace
See Also