Your search did not match any results.

Card View - Data Validation

DevExtreme CardView allows you to validate user input as necessary. You can apply pre-defined validation rules or custom rules to individual columns.

Backend API
@model IEnumerable<DevExtreme.NETCore.Demos.Models.CardView.DataValidation.Employee> @(Html.DevExtreme().CardView<DevExtreme.NETCore.Demos.Models.CardView.DataValidation.Employee>() .ID("cardView") .DataSource(Model, "ID") .CardsPerRow(Mode.Auto) .CardMinWidth(350) .Height(840) .CardCover(cc => { cc .ImageExpr(new JS("cardCoverImageExpr")) .AltExpr(new JS("cardCoverAltExpr")); }) .Editing(e => { e .AllowAdding(true) .AllowUpdating(true) .AllowDeleting(true) .Popup(p => p .Title("Employee Info") .ShowTitle(true) .Width(700) .Height(525) ) .Form(f => f.Items(items => { items.AddGroup() .Caption("Personal Data") .ColCount(2) .ColSpan(2) .Items(groupItems => { groupItems.AddSimple().DataField("FirstName"); groupItems.AddSimple().DataField("LastName"); groupItems.AddSimple().DataField("BirthDate"); groupItems.AddSimple().DataField("Picture"); }); items.AddGroup() .Caption("Main Info") .ColCount(2) .ColSpan(2) .Items(groupItems => { groupItems.AddSimple().DataField("HireDate"); groupItems.AddSimple().DataField("Title"); groupItems.AddSimple().DataField("Department"); groupItems .AddSimple().DataField("Notes") .Editor(editor => editor.TextArea().Height(100)); }); items.AddGroup() .Caption("Contacts") .ColCount(2) .ColSpan(2) .Items(groupItems => { groupItems .AddSimple().DataField("Address") .ColSpan(2); groupItems.AddSimple().DataField("City"); groupItems.AddSimple().DataField("Zipcode"); groupItems .AddSimple().DataField("MobilePhone") .Editor(editor => editor.TextBox() .Mask("+1 (000) 000-0000") .UseMaskedValue(true) ); groupItems.AddSimple().DataField("Email"); }); })); }) .SearchPanel(sp => sp.Visible(true)) .Columns(c => { c.Add() .Caption("Full Name") .CalculateFieldValue("calculateFullName"); c.Add() .DataField("BirthDate") .DataType(GridColumnDataType.Date) .ValidationRules( vr => vr.AddRequired() ); c.Add() .DataField("HireDate") .DataType(GridColumnDataType.Date) .ValidationRules( vr => { vr.AddRequired(); vr .AddCustom() .ValidationCallback("hireDateValidationCallback") .Message("Hire date cannot be earlier than birth date"); } ); c.Add() .Caption("Position") .DataField("Title") .ValidationRules( vr => vr.AddRequired() ); c.Add().DataField("Department"); c.Add().DataField("Address"); c.Add().DataField("MobilePhone") .ValidationRules( vr => vr.AddRequired() ); c.Add() .DataField("Email") .ValidationRules( vr => { vr.AddRequired(); vr.AddEmail(); vr .AddAsync() .ValidationCallback("emailValidationCallback") .Message("Email address is not unique") .IgnoreEmptyValue(true); } ); c.Add() .DataField("Notes") .Visible(false); c.Add() .DataField("FirstName") .Visible(false) .ValidationRules( vr => vr.AddRequired() ); c.Add() .DataField("LastName") .Visible(false) .ValidationRules( vr => vr.AddRequired() ); c.Add() .DataField("City") .Visible(false); c.Add() .DataField("Zipcode") .Visible(false); c.Add() .DataField("Picture") .Visible(false); }) ) <script> function cardCoverImageExpr({ Picture }) { return Picture && `@Url.Content("~/images/employees/new")/${Picture}`; } function cardCoverAltExpr({ FirstName, LastName }) { return `Photo of ${FirstName} ${LastName}`; } function calculateFullName(data) { return `${data.FirstName} ${data.LastName}`; } function hireDateValidationCallback(params) { return new Date(params.value) > new Date(params.data.BirthDate); } function emailValidationCallback(params) { return $.ajax({ url: 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress', type: 'POST', dataType: 'json', contentType: 'application/json', data: JSON.stringify({ id: params.data.id, email: params.value, }), }); } </script>
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.CardView.ColumnChooser; using DevExtreme.NETCore.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.NETCore.Demos.Models.CardView.ColumnReordering; using DevExtreme.NETCore.Demos.Models.CardView.DataValidation; using DevExtreme.NETCore.Demos.Models.CardView.FilterPanel; using DevExtreme.NETCore.Demos.Models.CardView.Overview; using DevExtreme.NETCore.Demos.Models.CardView.PopupEditing; using DevExtreme.NETCore.Demos.Models.CardView.SearchPanel; using DevExtreme.NETCore.Demos.Models.CardView.Selection; using DevExtreme.NETCore.Demos.Models.CardView.SimpleArray; using DevExtreme.NETCore.Demos.Models.CardView.Sorting; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class CardViewController : Controller { public ActionResult DataValidation() { return View(DataValidationSampleData.Employees); } } }

In this demo, the following rules are used:

  • required
    Specifies that field values should not be empty. The birthDate, hireDate, title, firstName, and lastName fields use required rule.
  • pattern
    Specifies a pattern that field values should match. The mobilePhone field uses pattern rule.
  • email
    Specifies that field values match the Email pattern. The email field uses email rule.
  • async
    Specifies custom validation parameters that are used to validate a value on the server. The email field uses async rule.
  • custom
    Specifies custom validation rules. This demo implements a custom rule to prevent users from setting hireDate earlier than birthDate.