Change the border color of the controls whose validation fails
Ever wondered how you can change the border color settings of the control whose client side validation fails, so you can catch the user attention easily.. Well I did. I tried with the asp.net validation controls given by the .net framework, but none of those validation controls facilitate this. So, I dug around little deeper and found a way to do that. Ofcourse, that involves modifying the WebUIValidation.js file provided with asp.net.
For folks who are wondering what this WebUIValidation.js file does. This is a javascript file provided by microsoft with all the javascript code used by the various asp.net validation controls. This file is found in the "aspnet_client\system_web\1_1_4322" folder under your wwwroot folder
Ok. Lets get to the point here.
Ohh.. by the way, I am assuming we all use ValidationSummary control in our pages to summarise all the validation error messages at one place, if not this may not be much helpful to you, although this trick may give you some clues
Before we begin place the following javascript function somewhere in the WebUIValidation.js file
function
changeBorder(id)
{
var control = document.getElementById(id);
control.style.borderWidth = "1px";
control.style.borderStyle = "solid";
control.style.borderColor="red";
}
Now....
Look for the function named ValidationSummaryOnSubmit in the WebUIValidation.js file. This method is used by the validation summary control to iterate through all the invalid controls and output their error messages in certain format
If you look inside the method, you notice that there is a conditional block, which checks to see if the Page is valid..
if
(!Page_IsValid) {
......
}
In this If loop, there is a "for" loop, which iterates through all the invalid controls..
for
(i=0; i<Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid && typeof(Page_Validators[i].errormessage) == "string") {
s += pre + Page_Validators[i].errormessage + post;
}
}
In this loop put the following code
changeBorder(Page_Validators[i].controltovalidate);
Now the above for loop would look something like this
for (i=0; i<Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid && typeof(Page_Validators[i].errormessage) == "string") {
/*Your Code -- Not Microsoft's*/
changeBorder(Page_Validators[i].controltovalidate);
/*End of Your Code*/
s += pre + Page_Validators[i].errormessage + post;
}
}
Thats all.. All of your invalid controls will have a thin red border color when they are invalid