Unobtrusive Validation

The DevExpress Bootstrap editors rely on the DRY ("Don't Repeat Yourself") ideology of ASP.NET Core MVC validation. This ideology implies that you declaratively specify functionality and behavior of model class properties using Data Annotation attributes. Data validation is performed based on the specified attributes both on the client and server sides.

DevExpress Bootstrap editors support Unobtrusive client validation that is compatible with Data Annotation attributes. To enable unobtrusive validation, link the required JavaScript files:

The ValidationSettings method allows you to configure editor validation setting (for example, you can customize the error icon or specify a third-party container to display error text).

@model FormRegistration
@using(Html.BeginRouteForm("components", new { DemoKey = "Editors-Validation" }, FormMethod.Post)) {
    <div class="form-group">
        @(Html.DevExpress()
            .BootstrapTextBoxFor(m => m.Name)
            .CssClasses(css => css.Control("ctrl-fixed-width-lg")))
    </div>
    <div class="form-group">
        @(Html.DevExpress()
            .BootstrapDateEditFor(m => m.Birthday)
            .CssClasses(css => css.Control("ctrl-fixed-width-lg")))
    </div>
    <div class="form-group">
        @(Html.DevExpress()
            .BootstrapComboBoxFor(m => m.Occupation)
            .CssClasses(css => css.Control("ctrl-fixed-width-lg"))
            .Bind(OccupationContext.AvailableOccupations))
    </div>
    <div class="form-group">
        @(Html.DevExpress()
            .BootstrapButtonEditFor(m => m.Email)
            .Buttons(buttons =>
                buttons.Add().IconCssClass("fa fa-envelope"))
            .CssClasses(css => css.Control("ctrl-fixed-width-lg")))
    </div>
    <div class="form-group">
        @(Html.DevExpress()
            .BootstrapTextBoxFor(m => m.Phone)
            .MaskSettings(mask => mask
                .Mask("+1 (999) 999-9999")
                .IncludeLiterals(MaskIncludeLiteralsMode.None))
            .CssClasses(css => css.Control("ctrl-fixed-width-lg")))
    </div>
    @(Html.DevExpress()
        .BootstrapButton()
        .Name("OK")
        .Text("OK")
        .UseSubmitBehavior(true)
        .SettingsBootstrap(bootstrap => bootstrap.RenderOption(BootstrapRenderOption.Primary))
        .CssClasses(css => css.Icon("fa fa-check")))
}
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class EditorsController : Controller {
        [HttpGet]
        public IActionResult UnobtrusiveValidation() {
            return PartialView("Validation/UnobtrusiveValidation", new FormRegistration());
        }
        [HttpPost]
        public IActionResult UnobtrusiveValidation(FormRegistration formRegistration) {
            return PartialView("Validation/UnobtrusiveValidation", formRegistration);
        }
    }
}
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace DevExpress.AspNetCore.Demos {
    public class FormRegistration {
        [Required]
        [DisplayFormat(NullDisplayText = "Enter Name...")]
        public string Name { get; set; }
        [Required]
        [DisplayFormat(NullDisplayText = "Select Birthday...")]
        public DateTime Birthday { get; set; }
        [Required]
        [DisplayFormat(NullDisplayText = "Select Occupation...")]
        public string Occupation { get; set; }
        [Required, RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*")]
        [DisplayFormat(NullDisplayText = "Enter E-mail...")]
        public string Email { get; set; }
        [Required, RegularExpression(@"\(?\b[0-9]{3}\)?[-. ]?[0-9]{3}[-. ]?[0-9]{4}\b"), MaxLength(15)]
        [DisplayFormat(NullDisplayText = "Enter Phone Number...")]
        public string Phone { get; set; }
    }

    public class OccupationContext {
        public static string[] AvailableOccupations = new string[] {
            "Academic", "Administrative", "Art/Entertainment", "College Student", "Community & Social", "Computers",
            "Education",  "Engineering", "Financial Services", "Government", "High School Student", "Law", "Managerial",
            "Manufacturing", "Medical/Health", "Military", "Non-government Organization", "Other Services", "Professional",
            "Retail", "Science & Research", "Sports", "Technical", "University Student", "Web Building"
        };
    }
}
Screen Size
Color Themes
Demo QR Code