How to: Implement a Custom Validation
- 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.
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.";
}
}
<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 ASPx
Client or ASPxEdit. Validation Edit. event.Validation - Specify the Validation
Settings. or ValidationRequired Field Settings. property.Regular Expression - Set the ASPx
Edit. property toIs Valid 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 Validationtrue
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 Validationtrue
to show an error frame.
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');
}
}
<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>