Add class to textbox when invalid, using .Net Validators

Question

I'm working on a multipage form in .Net using AJAX (UpdatePanels). I am stuck right now trying to get a class added to the textbox that is invalid to basically highlight it red.

I found a sample online using this code:

    $("span.invalid").bind("DOMAttrModified propertychange", function (e) {
    // Exit early if IE because it throws this event lots more
    if (e.originalEvent.propertyName && e.originalEvent.propertyName != "isvalid") return;

    var controlToValidate = $("#" + this.controltovalidate);
    var validators = controlToValidate.attr("Validators");
    if (validators == null) return;

    var isValid = true;
    $(validators).each(function () {
        if (this.isvalid !== true) {
            isValid = false;
        }
    });

    if (isValid) {
        controlToValidate.removeClass("invalid");
    } else {
        controlToValidate.addClass("invalid");
    }
});

That works perfectly, in IE only. For some reason this code does not ever fire in Firefox. I've looked up the DOMAttrModified event and it sounds like this should work in Firefox, hence it being in the code. I must be missing something though because it does not work.

I'm open to other solutions for what I am trying to accomplish here if anyone has something good. Basically the form is 3 pages right now. Page 1 has a variable number of fields that require validation. It could be 5, or 13 fields, based on a checkbox. Page 2 has another set of fields that need to be validated separately. Obviously when I am on page 1 it should not try to validate page 2, and vice versa.

Please help with either some help to fix the code I have, or an alternative.

Answer 1

2 suggestions for you..

1) Have you considered using the onchange event of the textbox to trigger the validation rather than propertychange? You should be able to do this using something similar to the code below.

// Get the textbox element
var target = document.getElementById('textBox1');

// Fire the onchange event
if(target.fireEvent) 
{   
    // IE
    target.fireEvent('onchange');
} 
else if(document.createEvent) 
{ 
    // Firefox
    var ffEvent = document.createEvent('HTMLEvents');
    ffEvent.initEvent('change', true, true);
    target.dispatchEvent(ffEvent);
}  

It may not fit but worth a punt.

2) You could could try a different event. Those supported are documented here. http://bit.ly/cc6Wdc

Good luck!