Your search did not match any results.
Validation

Validation

Documentation
DevExtreme Data Editors provide a powerful and seamless way to perform data validation. In this demo, editors are collected in an HTML form. Each editor is accompanied by the Validator widget validating the editor against a set of specified rules. Editors are validated each time their value is changed. All validation errors are displayed in the ValidationSummary widget.

In the ASP.NET MVC demo, editors extract validation rules from data annotations attributed to the fields of the model (see the EditorsViewModel.cs file).

Note that the "Register" button here does not implement a usual onClick event handler. Instead, it has the useSubmitBehavior option set to true. This setting tells the button to validate and submit the HTML form in which it is nested, with no further configuration required.
@model DevExtreme.MVC.Demos.ViewModels.EditorsViewModel @using(Html.BeginForm()) { using(Html.DevExtreme().ValidationGroup()) { @Html.AntiForgeryToken() <div class="dx-fieldset"> <div class="dx-fieldset-header">Credentials</div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Login) </div> <div class="dx-field-value"> @Html.DevExtreme().TextBoxFor(m => m.Login) </div> </div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Password) </div> <div class="dx-field-value"> @(Html.DevExtreme().TextBoxFor(m => m.Password) .Mode(TextBoxMode.Password) ) </div> </div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.ConfirmPassword, "Confirm Password") </div> <div class="dx-field-value"> @(Html.DevExtreme().TextBoxFor(m => m.ConfirmPassword) .Mode(TextBoxMode.Password) ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Personal Data</div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Name) </div> <div class="dx-field-value"> @Html.DevExtreme().TextBoxFor(m => m.Name) </div> </div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Date, "Date of birth") </div> <div class="dx-field-value"> @(Html.DevExtreme().DateBoxFor(m => m.Date) .InvalidDateMessage("The date must have the following format: MM/dd/yyyy") ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Billing address</div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Country) </div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBoxFor(m => m.Country) .DataSource(d => d.WebApi().Controller("GeoNames").LoadAction("Countries").Key("this")) ) </div> </div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.City) </div> <div class="dx-field-value"> @Html.DevExtreme().TextBoxFor(m => m.City) </div> </div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Address) </div> <div class="dx-field-value"> @Html.DevExtreme().TextBoxFor(m => m.Address) </div> </div> <div class="dx-field"> <div class="dx-field-label"> @Html.LabelFor(m => m.Phone) <i>(optional)</i> </div> <div class="dx-field-value"> @(Html.DevExtreme().TextBoxFor(m => m.Phone) .Mask("+1 (X00) 000-0000") .MaskRules(new { X = new JS("/[02-9]/") }) .MaskInvalidMessage("The phone must have a correct USA phone format") .UseMaskedValue(true) ) </div> </div> </div> @(Html.DevExtreme().CheckBoxFor(m => m.Accepted) .ID("check") .Text("I agree to the Terms and Conditions") ) @(Html.DevExtreme().ValidationSummary() .ID("summary") ) @(Html.DevExtreme().Button() .ID("button") .Text("Register") .Type(ButtonType.Success) .UseSubmitBehavior(true) ) } } <script> function verifyAge(options) { return options.value && new Date(Date.now()).getFullYear() - options.value.getFullYear() >= 21; } </script>
<p>The submitted data has been successfully accepted.</p> <br /> @(Html.DevExtreme().Button() .Text("Reload demo") .Type(ButtonType.Default) .Icon("refresh") .OnClick(@<text> function() { window.location = window.location; } </text>) )
using DevExtreme.MVC.Demos.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ValidationController : Controller { [HttpGet] public ActionResult Overview() { return View(new EditorsViewModel { Name = "Peter" }); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Overview(EditorsViewModel userInfo) { if(ModelState.IsValid) { return View("SuccessValidation"); } return View(userInfo); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class GeoNamesController : ApiController { [HttpGet] public HttpResponseMessage Countries(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(SampleData.Countries, loadOptions)); } [HttpGet] public HttpResponseMessage Cities(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(SampleData.Cities, loadOptions)); } } }
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.ViewModels { public class AgeVerificationAttribute : ValidationAttribute, IClientValidatable { protected override ValidationResult IsValid(object value, ValidationContext validationContext) { DateTime? date = (DateTime?)value; if(date <= DateTime.Now.AddYears(-21)) { return ValidationResult.Success; } return new ValidationResult(this.FormatErrorMessage(validationContext.DisplayName)); } public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) { var rule = new ModelClientValidationRule(); rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()); rule.ValidationParameters.Add("validationcallback", "verifyAge"); rule.ValidationType = "custom"; yield return rule; } } }
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.ViewModels { public class EditorsViewModel { [Required(ErrorMessage = "Login is required")] public string Login { get; set; } [Required(ErrorMessage = "Name is required")] [RegularExpression(@"^[^0-9]+$", ErrorMessage = "Do not use digits in the Name.")] [StringLength(int.MaxValue, MinimumLength = 2, ErrorMessage = "Name must have at least 2 symbols")] public string Name { get; set; } [Required(ErrorMessage = "Password is required")] public string Password { get; set; } [Required(ErrorMessage = "Confirm Password is required")] [System.ComponentModel.DataAnnotations.Compare("Password", ErrorMessage = "'Password' and 'Confirm Password' do not match.")] public string ConfirmPassword { get; set; } [RegularExpression(@"^\+\s*1\s*\(\s*[02-9]\d{2}\)\s*\d{3}\s*-\s*\d{4}$", ErrorMessage = "The phone must have a correct USA phone format")] public string Phone { get; set; } public string Extension { get; set; } [Required(ErrorMessage = "Country is required")] public string Country { get; set; } [Required(ErrorMessage = "Address is required")] public string Address { get; set; } public string Description { get; set; } public int Age { get; set; } public string Drink { get; set; } [Required(ErrorMessage = "City is required")] [RegularExpression("^[^0-9]+$", ErrorMessage = "Do not use digits in the City name.")] [StringLength(int.MaxValue, MinimumLength = 2, ErrorMessage = "City must have at least 2 symbols")] public string City { get; set; } public IEnumerable<string> Colors { get; set; } public IEnumerable<string> SelectedColors { get; set; } public string Color { get; set; } [Required(ErrorMessage = "Date of birth is required")] [AgeVerification(ErrorMessage = "You must be at least 21 years old")] public DateTime? Date { get; set; } [Required(ErrorMessage = "You must agree to the Terms and Conditions")] public bool Accepted { get; set; } } }
#check { padding-left: 5px; } #summary { padding-left: 10px; margin-top: 20px; margin-bottom: 10px; } #button { display: block; }