1. Create a CSS Class that allows you to highlight invalid inputs and display messages in a pretty way
input.error
{
background: #fed; border: 1px solid red;
}
2. Create validators.js. Here are the contents from that file:
ValidatorCommonOnSubmit = function()
{
ClearValidatorCallouts();
var result = SetValidatorCallouts();
return result;
}
ValidatorValidate = function(val, validationGroup, event)
{
val.isvalid = true;
if ((typeof(val.enabled) == 'undefined' || val.enabled != false) && IsValidationGroupMatch(val, validationGroup))
{
if (typeof(val.evaluationfunction) == 'function')
{
val.isvalid = val.evaluationfunction(val);
if (!val.isvalid && Page_InvalidControlToBeFocused == null && typeof(val.focusOnError) == 'string' && val.focusOnError == 't')
{
ValidatorSetFocus(val, event);
}
}
}
ClearValidatorCallouts();
SetValidatorCallouts();
ValidatorUpdateDisplay(val);
}
SetValidatorCallouts = function()
{
var i;
var pageValid = true;
for (i = 0; i < Page_Validators.length; i++)
{
var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid)
{
if(pageValid)
inputControl.focus();
WebForm_AppendToClassName(inputControl, 'error');
pageValid = false;
}
}
return pageValid;
}
ClearValidatorCallouts = function()
{
var i;
var invalidConrols = [];
for (i = 0; i < Page_Validators.length; i++)
{
var inputControl = document.getElementById(Page_Validators[i].controltovalidate);
WebForm_RemoveClassName(inputControl, 'error');
}
}
function WebForm_RemoveClassName(element, className)
{
var current = element.className;
if (current)
{
if (current.substring(current.length - className.length - 1, current.length) == ' ' + className)
{
element.className = current.substring(0, current.length - className.length - 1);
return;
}
if (current == className)
{
element.className = "";
return;
}
var index = current.indexOf(' ' + className + ' ');
if (index != -1)
{
/* BUG 1: index + 1 instead of index to include one space */
element.className = current.substring(0, index + 1) + current.substring(index + className.length + 2, current.length);
return;
}
/* BUG 2: className.length + 1 instead of className.length in order that the comparison is true */
if (current.substring(0, className.length + 1) == className + ' ')
element.className = current.substring(className.length + 1, current.length);
}
}
function WebForm_AppendToClassName(element, className)
{
var current = element.className;
if (current)
{
if (current.charAt(current.length - 1) != ' ')
{
current += ' ';
}
current += className;
}
else
{
current = className;
}
element.className = current;
}
3. Override the Render event handler of your Page or MasterPage class to insert a reference to your re-written event validation scripts
Protected Sub form1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.PreRender
Dim validatorOverrideScripts As String = "<script src='validators.js' type='text/javascript'></script>"
Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "ValidatorOverrideScripts", validatorOverrideScripts, False)
MyBase.OnPreRender(e)
End Sub
4. Lastly, Add some validators to a web form and see it in action
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>:: Trap Safari Enter Key ::</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>Login Information</legend>
<div class="row">
<label class="required">
Email Address
<span class="subtle"></span>
</label>
<asp:TextBox ID="txtEmail1" CssClass="large required email" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="valEmail" runat="server" Display="Dynamic" ControlToValidate="txtEmail1" ErrorMessage="Email Address is required."><span class="error">Email Address is required.</span></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="valEmailAdd" runat="server" Display="Dynamic" ControlToValidate="txtEmail1" ValidationExpression=".*@.{2,}\..{2,}" ErrorMessage="Email Address should be in name@domain.com format."><span class="error">Email Address should be in name@domain.com format.</span></asp:RegularExpressionValidator>
<div class="clear"></div>
</div>
<div class="row">
<label class="required">Password</label>
<asp:Textbox ID="txtPassword" CssClass="large required" runat="server" ></asp:Textbox>
<div class="clear"></div>
</div>
<div class="row">
<label class="required">Confirm Password</label>
<asp:TextBox ID="txtConPassword" CssClass="large required" runat="server" ></asp:TextBox>
<div class="clear"></div>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Refrence from the :http://geekswithblogs.net/ptahiliani/archive/2009/08/13/highlighting-textbox-on-error-using-required-field-validator.aspx