How to: Validate an Editor

• Jan 19, 2021
• 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.

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

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