Validate Card Data
- 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.
<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
<Columns>
...
</Columns>
</dx:ASPxCardView>
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).
<dx:ASPxCardView ID="CardView" runat="server" OnCardValidating="CardView_CardValidating" ...>
<Columns>
...
</Columns>
<SettingsBehavior EncodeErrorHtml="true" />
...
</dx:ASPxCardView>
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.
<dx:ASPxCardView ID="CardView" runat="server" OnHtmlCardPrepared="CardView_HtmlCardPrepared" ...>
<Columns>
...
</Columns>
...
</dx:ASPxCardView>
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.
<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.
<dx:ASPxCardView ID="CardView" runat="server" ...> <Columns> <dx:CardViewTextColumn FieldName="FirstName"> <PropertiesTextEdit ClientInstanceName="firstName"> <ClientSideEvents Validation="onValidation" /> </PropertiesTextEdit> </dx:CardViewTextColumn> ... </Columns> </dx:ASPxCardView>
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).
<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>
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
<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>
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
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.";
}
<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>