Well, we are about to change that! Let’s start with changing the validator evaluation function.
$(function () {
for (var i = 0; i < window.Page_Validators.length; i++) {
// Create a new property and assign the original evaluation function to it
window.Page_Validators[i].baseEvaluationFunction = window.Page_Validators[i].evaluationfunction;
// Set our own validation function
window.Page_Validators[i].evaluationfunction = evaluateField;
}
});
With the help of jQuery, this will run when the DOM is ready. It loops over the ASP.NET validators on the page and creates a new property ‘baseEvaluationFunction’ for each of them on the fly. That property is assigned with the current (default) evaluation function. Secondly, we assign our custom evaluation function to the ‘evaluationfunction’ property.
function evaluateField (validator) {
// Run the original validation function
var isvalid = validator.baseEvaluationFunction(validator);
// Handle the result
if (isvalid) {
clearError(validator);
} else {
setError(validator);
}
// Return result
return isvalid;
}
In the custom evaluation function the base (default) evaluation function is executed and based on the result things on the form can be changed. In the functions setError and clearError the correct css is applied. I used the errormessage property to also explain the user what is wrong. Finally the function returns if the evaluation was valid or not.
One more thing: set the Display property of the ASP.NET validators to None, otherwise ASP.NET will still display the error message.
<asp:RequiredFieldValidator ID="FirstNameValidator" ControlToValidate="FirstNameTextBox" Display="None" ErrorMessage="Please enter your first name." runat="server"></asp:RequiredFieldValidator>
Pretty easy, eh?
