Validate Card Data

• Aug 24, 2021
• 3 minutes to read

This topic describes how to validate data in ASPxCardView and display error icons/messages for invalid fields.

Validate Cards

Handle the ASPxCardView.CardValidating event to validate cards on the server side. ASPxCardView raises this event when you call the ASPxCardView.DoCardValidation method or a user clicks the “Save changes” button .

ASPX

<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
    <Columns>
        <dx:CardViewBinaryImageColumn FieldName="Photo">
            <PropertiesBinaryImage ImageHeight="175px">
                <EditingSettings Enabled="true" UploadSettings-UploadValidationSettings-MaxFileSize="4194304" />
            </PropertiesBinaryImage>
        </dx:CardViewBinaryImageColumn>
        <dx:CardViewTextColumn FieldName="FirstName" />
        <dx:CardViewTextColumn FieldName="LastName" />
        <dx:CardViewTextColumn FieldName="Title" Caption="Position" />
        <dx:CardViewTextColumn FieldName="HomePhone" />
        <dx:CardViewDateColumn FieldName="HireDate" />
        <dx:CardViewDateColumn FieldName="BirthDate" />
        <dx:CardViewMemoColumn FieldName="Notes" PropertiesMemoEdit-Height="80" />
    </Columns>
    <CardLayoutProperties ColCount="3">
    ...
    </CardLayoutProperties>
</dx:ASPxCardView>

C#

protected void CardView_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e)
{
    foreach (CardViewColumn column in CardView.Columns)
    {
        CardViewColumn card = column as CardViewColumn;
        if (card == null) continue;
        if (e.NewValues[card.FieldName] == null)
            e.Errors[card] = "Value cannot be null.";
    }

    if (e.Errors.Count > 0) e.CardError = "Please, fill all fields.";

    if (e.NewValues["ProductName"] != null &&
        e.NewValues["ProductName"].ToString().Length < 6)
    {
        e.Errors[(CardViewColumn)CardView.Columns["ProductName"]] = "Field value must be at least two characters long.";
    }
}

Use the ASPxGridBehaviorSettings.EncodeErrorHtml option to specify whether the card view renders its error texts (e.CardError) as HTML or as text (removes HTML tags).

ASPX

<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
    <Columns>
        <dx:CardViewBinaryImageColumn FieldName="Photo">
            <PropertiesBinaryImage ImageHeight="175px">
                <EditingSettings Enabled="true" UploadSettings-UploadValidationSettings-MaxFileSize="4194304" />
            </PropertiesBinaryImage>
        </dx:CardViewBinaryImageColumn>
        <dx:CardViewTextColumn FieldName="FirstName" />
        <dx:CardViewTextColumn FieldName="LastName" />
        <dx:CardViewTextColumn FieldName="Title" Caption="Position" />
        <dx:CardViewTextColumn FieldName="HomePhone" />
        <dx:CardViewDateColumn FieldName="HireDate" />
        <dx:CardViewDateColumn FieldName="BirthDate" />
        <dx:CardViewMemoColumn FieldName="Notes" PropertiesMemoEdit-Height="80" />
    </Columns>
    <SettingsBehavior EncodeErrorHtml="true" />
    ...
</dx:ASPxCardView>

C#

protected void CardView_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e)
{
    foreach (CardViewColumn column in CardView.Columns)
    {
        CardViewColumn card = column as CardViewColumn;
        if (card == null) continue;
        if (e.NewValues[card.FieldName] == null)
            e.Errors[card] = "Value cannot be null.";
    }

    if (e.Errors.Count > 0) e.CardError = "Please, <b>fill</b> all fields.";

    if (e.NewValues["ProductName"] != null &&
        e.NewValues["ProductName"].ToString().Length < 6)
    {
        e.Errors[(CardViewColumn)CardView.Columns["ProductName"]] = "Field value must be at least two characters long.";
    }
}

You can use the HtmlCardPrepared event to indicate cards with invalid data. In the following sample, cards with invalid data are colored in red.

ASPX

<dx:ASPxCardView ID="CardView" runat="server" OnHtmlCardPrepared="CardView_HtmlCardPrepared" ...>
    <Columns>
        <dx:CardViewBinaryImageColumn FieldName="Photo">
            <PropertiesBinaryImage ImageHeight="175px">
                <EditingSettings Enabled="true" UploadSettings-UploadValidationSettings-MaxFileSize="4194304" />
            </PropertiesBinaryImage>
        </dx:CardViewBinaryImageColumn>
        <dx:CardViewTextColumn FieldName="FirstName" />
        <dx:CardViewTextColumn FieldName="LastName" />
        <dx:CardViewTextColumn FieldName="Title" Caption="Position" />
        <dx:CardViewTextColumn FieldName="HomePhone" />
        <dx:CardViewDateColumn FieldName="HireDate" />
        <dx:CardViewDateColumn FieldName="BirthDate" />
        <dx:CardViewMemoColumn FieldName="Notes" PropertiesMemoEdit-Height="80" />
    </Columns>
    <SettingsBehavior EncodeErrorHtml="true" />
    ...
</dx:ASPxCardView>

C#

protected void CardView_HtmlCardPrepared(object sender, ASPxCardViewHtmlCardPreparedEventArgs e)
{
    bool hasError = (sender as ASPxCardView).GetCardValues(e.VisibleIndex, "FirstName").ToString() == "test";
    hasError = hasError || string.IsNullOrEmpty((sender as ASPxCardView).GetCardValues(e.VisibleIndex, "LastName").ToString());

    if (hasError)
    {
            e.Card.ForeColor = System.Drawing.Color.Red;
    }
}

Validate Edit Cells

Use the following APIs to specify validation settings for individual edit cells.

• The EditProperties.ValidationSettings property provides access to an edit cell’s validation settings. For example, the ValidationSettings.RequiredField property allows you to specify that a field is required and users have to fill it.

ASPX

<dx:ASPxCardView ID="CardView" runat="server" ...>
    <Columns>
        <dx:CardViewTextColumn FieldName="FirstName">
            <PropertiesTextEdit>
                <ValidationSettings>
                    <RequiredField ErrorText="Custom Error Text" IsRequired="true" />
                </ValidationSettings>
            </PropertiesTextEdit>
        </dx:CardViewTextColumn>
        ...
    </Columns>
</dx:ASPxCardView>

• The Validation event allows you to validate an edit cell’s value.

ASPX

<dx:ASPxCardView ID="CardView" runat="server" ...>
    <Columns>
        <dx:CardViewTextColumn FieldName="FirstName">
            <PropertiesTextEdit ClientInstanceName="firstName">
                <ClientSideEvents Validation="onValidation" />
            </PropertiesTextEdit>
        </dx:CardViewTextColumn>
        ...
    </Columns>
</dx:ASPxCardView>

JS

function onValidation(s, e) {
    if (firstName.GetValue() == 'test') {
        e.isValid = false;
        e.errorText = "Invalid value";
    }
}

Custom Validation

Use the EnableCustomValidation property to validate an edit cell’s value in a custom way.

ASPX

<dx:ASPxCardView ID="CardView" runat="server" ...>
    <Columns>
        <dx:CardViewComboBoxColumn FieldName="CategoryID" Caption="Category Name">
            <PropertiesComboBox ClientInstanceName="category" ...>
                <ValidationSettings EnableCustomValidation="true" />
                <ClientSideEvents TextChanged="onChanged" />
            </PropertiesComboBox>
        </dx:CardViewComboBoxColumn>
        ...
    </Columns>
</dx:ASPxCardView>

JS

function onChanged(s, e) {
    if (category.GetText() == 'Produce') {
        category.SetIsValid(false);
        category.SetErrorText('invalid value');
    }
}