Friday, June 13, 2014

[ ASP.Net ] - CustomValidator with client validation function script

1. Introduction

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 adequate to perform the special validations. In those situations, we will go for the CustomValidator control. This article will walk you through the usage of the CustomValidator control and shows how will you link the scripting function as the validation function.


2. About the Example

The below screenshot shows the example we are going to create:


Fig 1. CustomValidator Example

The Bonus percentage textbox is the control we are going to validate. The control marked as 2 is the custom validation control. Thos control validates the data entered in the percentage and throws the error when bonus percentage is more than 30. OK, let us move further.


3. CustomValidator control

With CustomValidator control, we can do validation on the Client Side alone or Sever side alone or in both places.  The important properties that need to be set for making use of the client-side scripting are shown in the below picture (Marked as 1).  The property ControlToValidate is set to identify the UI element we want to validate. In our example, we are going to validate bonus textbox (txtBonus). The property ClientValidationFunction is used to specify the client-side scripting function that performs the validation. The error message that needs to be displayed in the custom validation control is set by the ErrorMessage property. This is marked as 2 in the below picture.


Fig.2: ClientValidationFunction Property



Once we link the control to be validated with the Scripting function name, we start validating the value represented by that server-side Form U control. To better understand this have a look at the below depiction:



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 represented by the control is passed as the parameter to the scripting function. Whereas the scripting function makes use the Value and applies scripting power to do custom validation. The scripting function, responds back to the CustomValidator by setting the IsValid property to either true or false. When the value is false, the CustomerValidator reacts by displaying the Error string set the ErrorMessage property.

Fig.3 : CustomValidator & Client Scripting 


4. The Scripting Function

Below is the scripting function that performs the validation. The value entered in the bonus text box is referred here like args.Value.  Once the value is collected in the local variant variable intBonus, it is validated to make sure that bonus percent should not exceed 30%.

<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 video explains Making use of the CustomValidator control:

Video 1: Configuring the CustomValidator





Video 2: Running the sample ASP.Net Page


Source Code: Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)