How to: Validate an Editor

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

    View Example

    <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>
    

     

  • 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

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dx" %>
    <%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxPanel" TagPrefix="dx" %>
    <%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <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>