Validate Card Data

• Jun 16, 2022
• 3 minutes to read

This topic describes how to validate data in the ASPxCardView control.

Validate Cards

Handle the ASPxCardView.CardValidating event to validate cards on the server side. The card view raises this event when you call the ASPxCardView.DoCardValidation, UpdateEdit() methods or when a user clicks the “Update” button.

ASPX

<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
    <Columns>
        ...
    </Columns>
</dx:ASPxCardView>

C#

protected void CardView_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e)
{
    // Specifies an error message for an individual cell.
    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.NewValues["ProductName"] != null &&
        e.NewValues["ProductName"].ToString().Length < 6) {
        e.Errors[(CardViewColumn)CardView.Columns["ProductName"]] = "Field value must be at least two characters long.";
    }

    // Specifies an error message for a card.
    if (e.Errors.Count > 0) e.CardError = "Please, fill all fields.";
}

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

ASPX

<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
    <Columns>
        ...    
    </Columns>
    <SettingsBehavior EncodeErrorHtml="true" />
    ...
</dx:ASPxCardView>

C#

protected void CardView_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e)
{
    ...
    if (e.Errors.Count > 0) e.CardError = "Please, <b>fill</b> all fields.";
}

You can use the HtmlCardPrepared event to find cards with invalid data and specify their style settings. In the following example, cards with invalid data are colored in red.

ASPX

<dx:ASPxCardView ID="CardView" runat="server" OnHtmlCardPrepared="CardView_HtmlCardPrepared" ...>
    <Columns>

        ...
    </Columns>
    ...
</dx:ASPxCardView>

C#

protected void CardView_HtmlCardPrepared(object sender, ASPxCardViewHtmlCardPreparedEventArgs e)
{
    if (_your_condition_) {
        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 allows you to access to an edit cell’s validation settings. For example, a column editor’s ValidationSettings.RequiredField property specifies that an input field is required.

  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 fires when validation errors occur.

  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

Set the EnableCustomValidation property to true to show an error frame when you handle validation errors on any event except standard (Validation or CardValidating).

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');
    }
}

Validate Data in Templates

Handle the CardValidating event to validate custom editor values in the edit form and edit item templates on the server side.

Edit Form Template

ASPX

<dx:ASPxCardView ID="ASPxCardView1" runat="server" onCardValidating="ASPxCardView1_CardValidating" >
    <Templates>
        <EditForm>
            <div>
                <dx:ASPxMemo ID="notesEditor" .../>
                <dx:ASPxButton ID="ASPxButton1" OnClick="ASPxButton1_Click" Text="Save changes" ...>
                </dx:ASPxButton>
            </div>
        </EditForm>
    </Templates>
    ...
</dx:ASPxCardView>

C#

protected void ASPxCardView1_CardValidating(object sender, DevExpress.Web.ASPxCardViewDataValidationEventArgs e)
{
    ASPxMemo memo = ASPxCardView1.FindEditFormTemplateControl("notesEditor") as ASPxMemo;
    if (memo.Text == "")
        e.CardError = "Please, fill all fields.";
}
protected void ASPxButton1_Click(object sender, EventArgs e)
{
    ASPxCardView1.UpdateEdit();
}

Edit Item Template

C#

protected void ASPxCardView1_CardValidating(object sender, DevExpress.Web.ASPxCardViewDataValidationEventArgs e)
{
    ASPxMemo memo = ASPxCardView1.FindEditFormLayoutItemTemplateControl("notesEditor") as ASPxMemo;
    if (memo.Text == "")
        e.CardError = "Please, fill notes.";
}

ASPX

<dx:ASPxCardView ID="ASPxCardView1" runat="server" onCardValidating="ASPxCardView1_CardValidating" >
    <Columns>
        <dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="0">
            <EditItemTemplate>
                <dx:ASPxMemo ID="notesEditor" Text='<%# Bind("ProductName") %>' ... />
            </EditItemTemplate>
        </dx:CardViewTextColumn>
    </Columns>
    ...
</dx:ASPxCardView>