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.
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
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
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.
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> function CheckBonus(src, args) { var intBonus = args.Value; if (intBonus > 30) args.IsValid = false; else args.IsValid = true; } </script> |
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
Categories: Asp 2.0
Tags: ClientValidationFunction, ControlToValidate, CustomValidator, ErrorMessage Property
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.