How to: Implement a Custom Validation

• Jun 16, 2022
• 3 minutes to read

You can handle the server-side ASPxEdit.Validation event or the client-side ASPxClientEdit.Validation event to implement a custom validation. We recommended that you implement validation on both the client and server for security reasons.

Within the events, you can test the editor’s edit value (accessed from the e.Value/e.value (ValidationEventArgs.Value/ASPxClientEditValidationEventArgs.value) property) against custom validation criteria. If the entered value does not meet your requirements, you can set the event parameter’s e.IsValid/e.isValid (ASPxEdit.IsValid/ASPxClientEditValidationEventArgs.isValid) property to false to indicate that the editor is invalid. You can also use the e.ErrorText/e.errorText (ValidationEventArgs.ErrorText/ASPxClientEditValidationEventArgs.errorText) property to display an explanation of why the validation failed. When an editor is invalid, a message box displays the specified text.

The code sample below demonstrates how you can perform custom client-side validation to limit an permissible user age. For this purpose, the ASPxClientEdit.Validate event is handled.

JS

function OnBirthdayValidation(s, e) {
     var birthday = e.value;
     if(!birthday)
          return;
     var today = new Date();
     var msecPerYear = 1000 * 60 * 60 * 24 * 365;
     var years = (today.getTime() - birthday.getTime()) / msecPerYear;
     if(years < 14) {
          e.isValid = false;
          e.errorText = "You should be at least 14 years old.";
     }
}

ASPX

<dx:ASPxDateEdit ID="deBirthday" runat="server" Width="200px">
     <ClientSideEvents Validation="OnBirthdayValidation" />
     <ValidationSettings>
          <RequiredField IsRequired="True" ErrorText="Birthday is required" />
     </ValidationSettings>
</dx:ASPxDateEdit>

Note

You can use the following API to force the editor to render an error frame on the client side:

• Handle the ASPxClientEdit.Validation or ASPxEdit.Validation event.
• Specify the ValidationSettings.RequiredField or ValidationSettings.RegularExpression property.
• Set the ASPxEdit.IsValid property to false.

Otherwise, the editor does not render an error frame on the client side.

However, in some scenarios you may need to validate an editor without using any predefined validation capabilities. In these cases, set the ValidationSettings.EnableCustomValidation property to true to force the editor to render the error frame on the client side.

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>