How to: Determine Editor Validity

• Jan 15, 2021
• 6 minutes to read

How to determine a single editor validity

• To determine a single editor validity on the server side, use the ASPxEdit.IsValid property.

• To determine a single editor validity on the client side, call the ASPxClientEdit.GetIsValid method. Note that the GetIsValid method does not perform validation, 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.

  JS

  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 determine a validity of several editors

Note

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

You can use the AreEditorsValid, ValidateEditorsInContainer, ValidateEditorsInContainerById, or ValidateGroup method to determine the validity of several editors instead.

 

• Use of the AreEditorsValid methods

  The ASPxEdit.AreEditorsValid and ASPxClientEdit.AreEditorsValid methods can be used to determine editor validity on the server and client side respectively. The methods check the validity (the ASPxEdit.IsValid property value) of several DevExpress editors 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.

  Note

  A complete sample project is available at https://github.com/DevExpress-Examples/how-to-check-the-validation-state-of-editors-using-the-areeditorsvalid-method-e1844

  Default.aspx (C#)

  <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

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

  Default.aspx.vb

  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
  

  Default.aspx (VB.NET)

  <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, which return a boolean value specifying editor validity. Note that the methods re-run the validation for each control 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.

  Note

  A complete sample project is available at https://github.com/DevExpress-Examples/how-to-validate-editors-in-the-container-on-the-server-side-e3633

  Default.aspx (C#)

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

  Default.aspx.cs

  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";
      }
  }
  

  Default.aspx (VB.NET)

  <%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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 1 is required"/>
                                      </ValidationSettings>
                                  </dx:ASPxTextBox>
                              </td>
                          </tr>
                      </table>
                  </dx:PanelContent>
              </PanelCollection>
          </dx:ASPxCallbackPanel>
      </div>
      </form>
  </body>
  </html>
  

  Default.aspx.vb

  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