How to: Validate an Editor

Jan 19, 2021
5 minutes to read

How to validate a single editor

To validate a single editor on the server side, use the ASPxEdit.IsValid property.

To validate a single editor on the client side, call the ASPxClientEdit.GetIsValid method. Note that the GetIsValid method does not validate editor data, it only returns an editor’s validation status.

The code sample below implements custom validation without using any predefined validation capabilities. Note that you should set the ValidationSettings.EnableCustomValidation property to true to show an error frame.

function OnAgeValidation(s, e) {
     var age = tbAge.GetText();
     if (age == null || age == "")
          return;
     var digits = "0123456789";
     for (var i = 0; i < age.length; i++) {
          if (digits.indexOf(age.charAt(i)) == -1) {
               tbAge.SetIsValid(false);
               break;
          }
     }
     if (tbAge.GetIsValid() && age.charAt(0) == '0') {
          age = age.replace(/^0+/, "");
          if (age.length == 0)
               age = "0";
          tbAge.SetText(age);

     }
     if (age < 18) {
          tbAge.SetIsValid(false);
          tbAge.SetErrorText('Age must be greater than or equal 18');
     }
}

ASPX

<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" ClientInstanceName="tbAge">
     <ValidationSettings ValidateOnLeave="False" EnableCustomValidation="True">
     </ValidationSettings>
</dx:ASPxTextBox>

<dx:ASPxButton ID="btnValidate" runat="server" AutoPostBack="False" Text="Validate">
     <ClientSideEvents Click="OnAgeValidation" />
</dx:ASPxButton>

How to validate multiple editors simultaneously

Note

The server-side Page.IsValid property (or the client-side Page_IsValid property) is not affected by the DevExpress control’s validation process.

Use the AreEditorsValid, ValidateEditorsInContainer, ValidateEditorsInContainerById, or ValidateGroup method to validate several editors simultaneously.

Use of the AreEditorsValid methods

You can use the ASPxEdit.AreEditorsValid and ASPxClientEdit.AreEditorsValid methods to validate editors on the server and client sides, respectively. The methods validate (the ASPxEdit.IsValid property value) multiple DevExpress editors simultaneously without validating them again.

This example demonstrates how the AreEditosValid method can be used to check the validity of several DevExpress editors. In this sample, a click on the button automatically performs client and server validations of editors contained within the same container as the button.

Since client validation is raised automatically via a button click, it’s allowed to use the client ASPxClientEdit.AreEditorsValid method when handling the button’s client ASPxButton.Click event. If client validation passes successfully, then server validation of editors is automatically performed while processing a postback. In this case, the server ASPxEdit.AreEditorsValid method can be used to check the error state of editors.

Default.aspx

<dx:ASPxButton ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click">
    <ClientSideEvents Click="function(s, e) { 
                                if(ASPxClientEdit.AreEditorsValid()) {

                                // Prevent multiple presses of the button
                                    RemoveFocus();
                                    LoadingPanel.SetText('Sending data to the server...');
                                    LoadingPanel.Show();
                                }
                             }" />
</dx:ASPxButton>

Default.aspx.cs
Default.aspx.vb

protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (ASPxEdit.AreEditorsValid(FormPanel)) {
        // TODO: Write data to database
        FormPanel.Visible = false;
        SuccessPanel.Visible = true;
        btnAgain.Focus();

        // Intentionally pauses server-side processing, to demonstrate the Loading Panel functionality.
        Thread.Sleep(2000);
    }
}

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
    If ASPxEdit.AreEditorsValid(FormPanel) Then
        ' TODO: Write data to database
        FormPanel.Visible = False
        SuccessPanel.Visible = True
        btnAgain.Focus()

        ' Intentionally pauses server-side processing, to demonstrate the Loading Panel functionality.
        Thread.Sleep(2000)
    End If
End Sub

Use of the ValidateEditorsInContainer, ValidateEditorsInContainerById, and ValidateGroup methods

Another solution is to use the ASPxEdit.ValidateEditorsInContainer, ASPxClientEdit.ValidateEditorsInContainer, ASPxClientEdit.ValidateEditorsInContainerById, or ASPxClientEdit.ValidateGroup method. These methods return a Boolean value that specifies editor validity. Note that the methods run the validation for each control again, even if a given control has already been validated.

This example demonstrates how to validate editors in a container on the server side. The ASPxEdit.ValidateEditorsInContainer method is used to determine the validity of editors within a callback panel.

View Example

Default.aspx

<title>How to validate editors in container </title>

<script type="text/javascript" language="javascript">
    function Validate(s, e) {
        if (ASPxClientEdit.ValidateGroup('testGroup'))
            ClientCallbackPanelDemo.PerformCallback('');
    }
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxButton ID="ASPxButtonSave" runat="server" Text="Validate" AutoPostBack="False">
            <ClientSideEvents Click="Validate" />
        </dx:ASPxButton>
        <br />
        <dx:ASPxCallbackPanel ID="ASPxCallbackPanelDemo" runat="server"  HideContentOnCallback="False"
            ClientInstanceName="ClientCallbackPanelDemo" OnCallback="ASPxCallbackPanelDemo_Callback">
            <PanelCollection>
                <dx:PanelContent ID="PanelContent1" runat="server">
                    <table cellspacing="0" cellpadding="4" runat="server" id="serverContainer">
                        <tr>
                            <td style="width: 60px;">
                                <dx:ASPxLabel runat="server" ID="NameLabel" AssociatedControlID="txtNum1" Text="Number 1:" />
                            </td>
                            <td>
                                <dx:ASPxTextBox ID="txtNum1" runat="server" Width="170px" OnValidation="ASPxTextBoxTest_Validation">
                                    <ValidationSettings ValidationGroup="testGroup">
                                        <RequiredField IsRequired="True" ErrorText="Number 1 is required" />
                                    </ValidationSettings>
                                </dx:ASPxTextBox>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 60px;">
                                <dx:ASPxLabel runat="server" ID="ASPxLabel1" AssociatedControlID="txtNum2" Text="Number 2:" />
                            </td>
                            <td>
                                <dx:ASPxTextBox ID="txtNum2" runat="server" Width="170px" OnValidation="ASPxTextBoxTest_Validation">
                                    <ValidationSettings ValidationGroup="testGroup">
                                        <RequiredField IsRequired="True" ErrorText="Number 2 is required"/>
                                    </ValidationSettings>
                                </dx:ASPxTextBox>
                            </td>
                        </tr>
                    </table>
                </dx:PanelContent>
            </PanelCollection>
        </dx:ASPxCallbackPanel>
    </div>
    </form>
</body>
</html>

Default.aspx.cs
Default.aspx.vb

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web.ASPxEditors;
using DevExpress.Web.ASPxCallbackPanel;

public partial class _Default : System.Web.UI.Page {

    protected void Page_Init (object sender, EventArgs e) {

    }

    protected void ASPxCallbackPanelDemo_Callback (object sender, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e) {
        ASPxCallbackPanel callbackPanel = (ASPxCallbackPanel)sender;
        bool isValid = ASPxEdit.ValidateEditorsInContainer(callbackPanel);
    }
    protected void ASPxTextBoxTest_Validation (object sender, ValidationEventArgs e) {
        ASPxTextBox txt = sender as ASPxTextBox;
        int val;
        bool result = Int32.TryParse(txt.Text, out val);
        e.IsValid = result;
        e.ErrorText = "An input value should be a number";
    }
}

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web.ASPxEditors
Imports DevExpress.Web.ASPxCallbackPanel

Partial Public Class _Default
    Inherits System.Web.UI.Page


    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)

    End Sub

    Protected Sub ASPxCallbackPanelDemo_Callback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxClasses.CallbackEventArgsBase)
        Dim callbackPanel As ASPxCallbackPanel = CType(sender, ASPxCallbackPanel)
        Dim isValid As Boolean = ASPxEdit.ValidateEditorsInContainer(callbackPanel)
    End Sub
    Protected Sub ASPxTextBoxTest_Validation(ByVal sender As Object, ByVal e As ValidationEventArgs)
        Dim txt As ASPxTextBox = TryCast(sender, ASPxTextBox)
        Dim val As Integer
        Dim result As Boolean = Int32.TryParse(txt.Text, val)
        e.IsValid = result
        e.ErrorText = "An input value should be a number"
    End Sub
End Class

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

How to validate a single editor

How to validate multiple editors simultaneously