CustomValidator & Java-script Scripting

Hooking CustomValidator Control & Javascript

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:

"<yoastmark

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.

3. Hooking CustomValidator With JavaScript

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.

ClientValidationFunction Property
ClientValidationFunction Property

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.

CustomValidator & Java-script Scripting
CustomValidator & Java-script Scripting

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.

The below videos explain Making use of the control.


Video 1: Configuring the CustomValidator

Video 2: Running the CustomValidator ASP.Net Example


Source Code: Download ASP.Net CustomValidator Example From Google Drive

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.