Gal Ratner
Gal Ratner is a Techie who lives and works in Los Angeles. Follow galratner on Twitter Google
Give your old ASP.NET validators a makeover with jQuery TOOLS

If you have been working with the default validators in ASP.NET for a while you are probably used to the plain old look they create on your page and while you can rework the way they look, ASP.NET validators are essentially a Label. They are unable to change the appearance of other elements or run scripts without a complete page postback.


jQuery TOOLS is a jQuery based UI library you can find here. jQuery TOOLS contains a validator as a part of its form tools. The jQuery TOOLS validator is based on HTML 5 and CSS standards and has the ability to animate, change the appearances of the element it is validating, support multiple languages and more.


In this article I am doing to show how to quickly plug jQuery TOOLS into ASP.NET’s validation so that you can continue to use default validation along with the new look.


First let’s build our form. We are going to use ASP TextBoxs along with CustomValidators.


Let’s import jQuery tools along with some CSS directly taken from their example:

 

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/>

 


Next we are going to add the form elements along with some HTML 5 attributes. The attributes will help jQuery tools to validate the fields:

 

<form id="form1" runat="server">
	<fieldset>
		<p><asp:TextBox ID="NameTextBox" required="required" runat="server"></asp:TextBox>
		    <asp:CustomValidator ID="NameCustomValidator" ControlToValidate="NameTextBox" 
                ClientValidationFunction="jQueryValidation" ValidateEmptyText="true" 
                runat="server" onservervalidate="NameCustomValidator_ServerValidate"></asp:CustomValidator></p>
		<p><asp:TextBox ID="EmailTextBox" type="email" required="required" runat="server"></asp:TextBox>
            <asp:CustomValidator ID="EmailCustomValidator" ControlToValidate="EmailTextBox" 
                ClientValidationFunction="jQueryValidation" ValidateEmptyText="true" 
                runat="server" onservervalidate="EmailCustomValidator_ServerValidate"></asp:CustomValidator></p>
	</fieldset>
	<asp:Button ID="SubmitButton" runat="server" Text="Submit" onclick="SubmitButton_Click" />
	</form>



Notice we used ClientValidationFunction to signal our validators they need to run a Javascript function for client validation. Now we can wire the validation in using this snippet:

 

<script language="javascript">
		function jQueryValidation(source, arguments) {
		    var name = $("#" + source.controltovalidate).validator();
			arguments.IsValid = name.data("validator").checkValidity();
		}
    </script>

 


Server side validation:


For security purposes and to accommodate JavaScript disabled browsers we also need server side validation. Since we are checking for a required name and email, the server side validation will look like this:

 

protected void NameCustomValidator_ServerValidate(object source, ServerValidateEventArgs args)
    {
        args.IsValid = !string.IsNullOrWhiteSpace(args.Value);
    }
    protected void EmailCustomValidator_ServerValidate(object source, ServerValidateEventArgs args)
    {
        args.IsValid = Regex.IsMatch(args.Value,
              @"^(?("")(""[^""]+?""@)|(([0-9a-zA-Z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-zA-Z])@))" +
              @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,6}))$");
    }

 


Now that everything is wired and working, validation will look much better

:


 
As you can see we have preserved all of the default behavior of the original validation.
For more customization options, please check the jQuery TOOLS documentation here

Shout it


Posted 8 Nov 2011 10:33 PM by Gal Ratner

Powered by Community Server (Non-Commercial Edition), by Telligent Systems