How to use JavaScript function with ASP.NET CustomValidator?

How to use JavaScript function with ASP.NET CustomValidator?

By default under Validations ASP.NET provides 5 Controls. They are Required field validator, Range Validator, Regular Expression Validator, Compare Field Validator & Custom Validator. Using Required field validator we do check whether the field is mandatory to user or not. Range Validator valid a specific range of values. For an example if I am going to valid an IP address in this case I can set the range to 255. Regular Expression validator validates user data using per-defined regular Expressions. Compare field do comparison.

Now tell if some other kind of validation you want in your app then how to do this. In real-time it is ugly to break sequence. I mean if you are using ASP.NET Validation then for all fields it need to same.

Let’s take an example below. Here I am validation password length. What I need is user must need to enter 6 character length password. I did this using asp:CustomValidator & pure JavaScript. I mean CustomVaidator working with Client Script. To do this demo here inside HTML body I have added a ASP.NET Custom Validation control. Using ErrorMessage I am display the message which user will receive if he/she trying enter invalid data. As it is an error message using ForeColor=”Red” I am applying style to my Control. In my CustomValidator using ClientValidationFunction I am suplying my javascript function name without parenthesis.

Inside the JavaScript function passwordLength I am getting 2 values. These are function parameters sender and arguments. In argument under run-time I am fetching the txtPassword value and checking its length. Now you must have a query how my password field control is connected to the Custom Validator Control. Look Closely you will watch ControlToValidate=”txtPassword” in Vaidator Control. With this I am giving instruction to Custom Validator Control that Validate the input box which id is txtPassword.

ASP.NET CustomValidator with JS Function

<%@ Page Language="VB" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>JavaScript function with ASP.NET CustomValidator</title>
<script type="text/javascript">
/* passwordLength JS Function which I am referring in asp:CustomValidator */
function passwordLength(sender, args) {
debugger;
if (args.Value.length < 6)
/* If password length is less than 6 charecters returning False */
return args.IsValid = false;
else
return args.IsValid = true;
}
</script>
</head>
<body>
<form id="frmDemoApp" runat="server">
<div>
Password: <asp:TextBox runat="server" ID="txtPassword"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" ClientValidationFunction="passwordLength" ForeColor="Red" ErrorMessage="Enter a Password with minimum length of 6 characters."
ControlToValidate="txtPassword" runat="server">
</asp:CustomValidator>
</div>
</form>
</body>
</html>

Source of Image: http://www.hanselman.com