1. Introduction to CustomValidator
Validation controls are useful to perform the validation on the web forms. The asp.net framework provides validation controls like RequiredFieldValidator, RangeValidator and CompareValidator, etc. Sometimes, these validation controls are not fair to do the special validations. In those cases, we will go for the CustomValidator Control. In this example we will walk through the usage of the CustomValidator Control and learn how to link the java script function as the validation function.
2. About the CustomValidator Example Web Page
The below screenshot shows the example we are going to create:
The Bonus percentage text box is the control we will validate. The control next to it is the custom validation control. This control validates the data placed in the percentage and throws the error when bonus percentage is more than 30. OK, now we will move ahead with the example.
With CustomValidator control, we can do validation on the client side alone or sever side alone or in both places. The vital properties that need to be set for making use of the client-side scripting validations are shown in the below picture (Marked as 1). The property ControlToValidate will find the UI element we want to validate. In our example, we are going to validate bonus text box. The property ClientValidationFunction property tells the Control which client-side scripting function does the validation. The error message that needs to be shown in the CustomValidator control is set by the ErrorMessage property. This is marked as 2 in the below picture.
After we link the control to be validated with the scripting function name, we validate the value served by that server-side Form UI control. To better know this, have a look at the below picture.
The CustomValidator acts as a bridge between the Server-side control that needs to be validated and Client-side scripting function that does the validation. The value taken from the control is passed as an argument to the scripting function. Whereas the scripting function makes use of the value and applies scripting power to do custom validation. The scripting function responds to the Validator by setting the IsValid property to either true or false. When the value is false, the Control reacts by showing the Error string set in the ErrorMessage Property.
4. Writing Java Script Validation Function
Below is the Java Script function that does the validation. The Java Script Function deals with the value placed in the bonus text box as args.Value. Once the value is saved in the local variant variable intBonus, it is tested to make sure that bonus percent should not go more than 30%. When the value exceeds this limit, the Java Script CheckBonus function will return false.
function CheckBonus(src, args)
var intBonus = args.Value;
if (intBonus > 30)
args.IsValid = false;
args.IsValid = true;
The below videos explain Making use of the control.
Video 1: Configuring the CustomValidator
Video 2: Running the CustomValidator ASP.Net Example