How to: Validate a Group of Editors

• Jun 16, 2022
• 2 minutes to read

You can validate a group of editors in the following ways.

• Set the required editors’ ValidationSettings.ValidationGroup property to the same value. To validate the editor group, call the ASPxClientEdit.ValidateGroup method. Note that if you call the method with an empty (null) parameter, it validates all editors that do not specify the ValidationGroup property.

  ASPX

  <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px">
       <ValidationSettings ValidationGroup="MyGroup" ValidateOnLeave="False">
            <RequiredField IsRequired="True" ErrorText="Field is required" />
       </ValidationSettings>
  </dx:ASPxTextBox>
  <dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px">
       <ValidationSettings ValidationGroup="MyGroup" ValidateOnLeave="False">
            <RequiredField IsRequired="True" ErrorText="Field is required" />
       </ValidationSettings>
  </dx:ASPxTextBox>
  <dx:ASPxButton ID="btn" runat="server" Text="Validate" AutoPostBack="False" CausesValidation="False">
       <ClientSideEvents Click="function(s, e) {
            ASPxClientEdit.ValidateGroup('MyGroup');
       }" />
  </dx:ASPxButton>
  

• Put all the required editors in a container and call the client-side ASPxClientEdit.ValidateEditorsInContainer, ASPxClientEdit.ValidateEditorsInContainerById, or server-side ASPxEdit.ValidateEditorsInContainer method to validate all editors within the container.

  ASPX

  <dx:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0" ClientInstanceName="pageControl">
       <TabPages>
            <dx:TabPage>
                 <ContentCollection>
                      <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                           <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px">
                                <ValidationSettings ValidateOnLeave="False">
                                     <RequiredField ErrorText="Field is required" IsRequired="True" />
                                </ValidationSettings>
                           </dx:ASPxTextBox>
                           <dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px">
                                <ValidationSettings ValidateOnLeave="False">
                                     <RequiredField ErrorText="Field is required" IsRequired="True" />
                                </ValidationSettings>
                           </dx:ASPxTextBox>
                      </dx:ContentControl>
                 </ContentCollection>
            </dx:TabPage>
       </TabPages>
  </dx:ASPxPageControl>
  <dx:ASPxButton ID="btn" runat="server" Text="Validate" AutoPostBack="False" CausesValidation="False">
       <ClientSideEvents Click="ValidateEditors" />
  </dx:ASPxButton>
  

  JS

  function ValidateEditors (s, e) {
       var container = pageControl.GetMainElement();
       ASPxClientEdit.ValidateEditorsInContainer(container);
  }
  

• Set the editor’s ValidationSettings.CausesValidation and ASPxEdit.AutoPostBack properties to true. In this case, when a user changes an editor value, it will validate all editors in its validation group.

  ASPX

  <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" AutoPostBack="True">
       <ValidationSettings ValidationGroup="MyGroup" ValidateOnLeave="False" CausesValidation="True">
            <RequiredField IsRequired="True" ErrorText="Field is required" />
       </ValidationSettings>
  </dx:ASPxTextBox>
  <dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px" AutoPostBack="True">
       <ValidationSettings ValidationGroup="MyGroup" ValidateOnLeave="False" CausesValidation="True">
            <RequiredField IsRequired="True" ErrorText="Field is required" />
       </ValidationSettings>
  </dx:ASPxTextBox>
  

• You can validate a group of editors on an ASPxButton click. For this purpose, set the button’s ASPxButton.ValidationGroup property to the group name and the ASPxButton.CausesValidation property to true (the default value). In this case, the button click invokes group validation.

  ASPX

  <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px">
       <ValidationSettings ValidationGroup="MyGroup" ValidateOnLeave="False">
            <RequiredField IsRequired="True" ErrorText="Field is required" />
       </ValidationSettings>
  </dx:ASPxTextBox>
  <dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px">
       <ValidationSettings ValidationGroup="MyGroup" ValidateOnLeave="False">
            <RequiredField IsRequired="True" ErrorText="Field is required" />
       </ValidationSettings>
  </dx:ASPxTextBox>
  <dx:ASPxButton ID="btn" runat="server" Text="Validate" AutoPostBack="False" ValidationGroup="MyGroup">
  </dx:ASPxButton>