Data Grids / Data Management ▸ 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.

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.

@model IEnumerable<DevExtreme.MVC.Demos.Models.CardView.DataValidation.Employee>
@(Html.DevExtreme().CardView<DevExtreme.MVC.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("~/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 DevExtreme.MVC.Demos.Models.CardView.ColumnChooser;
using DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter;
using DevExtreme.MVC.Demos.Models.CardView.ColumnReordering;
using DevExtreme.MVC.Demos.Models.CardView.DataValidation;
using DevExtreme.MVC.Demos.Models.CardView.FilterPanel;
using DevExtreme.MVC.Demos.Models.CardView.Overview;
using DevExtreme.MVC.Demos.Models.CardView.PopupEditing;
using DevExtreme.MVC.Demos.Models.CardView.SearchPanel;
using DevExtreme.MVC.Demos.Models.CardView.Selection;
using DevExtreme.MVC.Demos.Models.CardView.SimpleArray;
using DevExtreme.MVC.Demos.Models.CardView.Sorting;
using DevExtreme.MVC.Demos.Models.SampleData;

using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class CardViewController : Controller
    {

        public ActionResult DataValidation()
        {
            return View(DataValidationSampleData.Employees);
        }

    }
}