Monday, December 28, 2009

Change Background on Invalid Fields

.NET doesn't provide a way to change the background color (or other attributes) of fields that fail validation when using the built-in validators. I think color prompting is a nice way to indicate bad user input, so rather than going to a whole lot of code-behind nonsense you can just shim on to the .NET validation display routine by putting this javascript on your ASPX page:


var OriginalValidatorUpdateDisplay = null;

function NewValidatorUpdateDisplay(val) {
OriginalValidatorUpdateDisplay(val);
if (val.controltovalidate) {
var ctrlIsValid=true;
var ctrl = document.getElementById(val.controltovalidate);
for (var i = 0; i < ctrl.Validators.length; i++) {
if (!ctrl.Validators[i].isvalid) {
ctrlIsValid = false;
}
}
if (ctrlIsValid) {
ctrl.style.backgroundColor = '';
ctrl.style.color = '';
}
else {
ctrl.style.backgroundColor = '#FF0000';
ctrl.style.color = '#FFFFFF';
}
}
}

if (typeof (ValidatorUpdateDisplay) == 'function') {
OriginalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NewValidatorUpdateDisplay;
}


That's it!

The only downside is that as-written there is only one "pass" and one "fail" attribute per page. You could change classes on the fly and accomplish more customization, but that sort of violates the elegance of this approach.

No comments: