Добавьте класс в текстовое поле, если он недействителен, используя .Net Validators

Question

Я работаю над многостраничной формой в .Net, используя AJAX (UpdatePanels). Я застрял прямо сейчас, пытаясь добавить класс, который является недействительным, чтобы выделить его красным цветом.

Я нашел образец онлайн, используя этот код:

    $("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");
    }
});

Это отлично работает, только в IE. По какой-то причине этот код никогда не срабатывает в Firefox. Я посмотрел на событие DOMAttrModified, и похоже, что это должно работать в Firefox, следовательно, оно есть в коде. Я должен что-то упустить, потому что это не работает.

Я открыт для других решений для того, чего я пытаюсь достичь, если у кого-то есть что-то хорошее. В основном форма составляет 3 страницы прямо сейчас. Страница 1 имеет переменное количество полей, требующих проверки. Это может быть 5 или 13 полей, основанных на флажке. Страница 2 имеет другой набор полей, которые должны быть проверены отдельно. Очевидно, что когда я нахожусь на странице 1, он не должен пытаться проверить страницу 2, и наоборот.

Помогите, пожалуйста, с помощью какой-нибудь справки исправить мой код или альтернативный вариант.

Answer 1

2 предложения для вас ..

1) Рассматривали ли вы использование события onchange текстового поля для запуска проверки, а не propertychange? Вы должны быть в состоянии сделать это, используя что-то похожее на код ниже.

// 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);
}  

Может не подходить, но стоит денег.

2) Вы можете попробовать другое событие. Те, кто поддерживаются, описаны здесь. http://bit.ly/cc6Wdc

Удачи!