Hightlight Or Change Background Color Of Invalid Controls When Validation Is Invalid(Asp.net).

There are many ways to handle error to user after validation is fail. You can provide message box or indicate error message to user. Using message box is not a really good way for user. They may familar at first, but they will get bored after using it from time to time. As for error message provided , sometime user may not clear enought what they are facing as they have to read the error message and go to find those invalid controls.

In this article, I'm going to demonstrate you how to handle validation error to user more nicely and clearly. Suppose I have two textboxs with requirefield validator once user click submit and value of those textbox are empty, it will hightlight textbox's border color to red( you can change background color or what ever you want base on your tendency).

Instruction:

1. In visual studio, Create a new web site and name it Validation.

2. Add two textboxs, two requirefield validators and one button.







3. Add javascript code in body tag to do clientside validation hightlight as following:

<script type="text/javascript">
if (document.forms[0].attachEvent)
{
document.forms[0].attachEvent("onsubmit", hightLightColor);
}
else if (document.forms[0].addEventListener)
{
document.forms[0].addEventListener("submit", hightLightColor, false);
}

function hightLightColor()
{
var allowSubmit = true;
if (Page_Validators)
{
var validator;
for (var i=0; i<Page_Validators.length; i++)
{
validator = Page_Validators[i];
if (!validator.isvalid)
{
document.getElementById(validator.controltovalidate).style.borderStyle="solid";
document.getElementById(validator.controltovalidate).style.borderColor = "#ff0000";
allowSubmit=false;
}
else
{ document.getElementById(validator.controltovalidate).style.borderStyle="";
document.getElementById(validator.controltovalidate).style.borderColor = "";
}
}
}
return allowSubmit;
}
</script>

4. In case user disable clientscript in browser, we need to add following line of codes to do validation hightlight on server side.

void Page_PreRender()
{
foreach (BaseValidator validator in Page.Validators)
{
WebControl controlToValidate = (WebControl)Page.FindControl(validator.ControlToValidate);
if (!validator.IsValid)
{
controlToValidate.BorderStyle = BorderStyle.Solid;
controlToValidate.BorderColor = System.Drawing.Color.Red;
}
else
{
controlToValidate.BorderColor = System.Drawing.Color.Empty;
controlToValidate.BorderStyle = BorderStyle.NotSet;
}
}
}


5. On button submit click event,

protected void btnSummit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
//do something
}
}

6. Finally, run your applicatioin












dowanload sourcecode: http://rapidshare.com/files/156015544/Validation.zip