How to: Validate a Group of Editors

• Aug 01, 2019
• 2 minutes to read

To validate a group of editors, you can use one of the following ways.

• Specify the required editors ValidationSettings.ValidationGroup property to the same value. To perform validation, call the ASPxClientEdit.ValidateGroup method. Note that if you call the method with an empty (null) parameter, it validates all editors that have the ValidationGroup property not specified.

  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 the editor’s value is changed, it will raise validation for all editors from 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 group name and the ASPxButton.CausesValidation property to true (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>