Event Listener действителен для форм HTML5

В новом HTML5 есть "недопустимое" событие, к которому вы можете добавить слушателя:
```
document.addEventListener('invalid', function(e){
   var element = $(e.target);
   element.addClass("invalid");
   element.parent().addClass("invalid");
}, true);
```
Обратите внимание, что это событие работает только при отправке формы... Если я стиль ввода input:invalid { background: red }, стиль применяется, когда пользователь начинает печатать, а его ввод недействителен. Это событие только уволили? Я попытался добавить слушателя к самим входам, а не к документу, и это не сработало.
Я добавляю слушателя, чтобы применить стиль к родительскому элементу ввода... Теперь, когда пользователь исправляет его, он снова действует снова... Я знаю, что там нет "действительного" события, поэтому, как могу ли я его выполнить?

Итак, вот скрипка → http://jsfiddle.net/Osoascam/ceArQ/7/ Недействительный прослушиватель, кажется, только уволен на submit... Я просто хотел узнать, есть ли способ добавить обработчик, как и для фокуса. Посмотрите, что если вы наберете

Спасибо заранее,

Óscar

Ответ 1

Чтобы решить вашу проблему, вы должны использовать: недопустимый псевдо-селектор и вход или событие изменения.

$(document).bind('change', function(e){
    if( $(e.target).is(':invalid') ){
        $(e.target).parent().addClass('invalid');
    } else {
        $(e.target).parent().removeClass('invalid');
    }
});

Вот простая скрипка http://jsfiddle.net/trixta/YndYx/.

Если вы хотите как можно скорее удалить класс ошибки, вы должны добавить класс ошибки при изменении и удалить его во входном событии (Примечание: входное событие намного лучше, чем здесь предлагаемое keyup, просто потому, что оно также запускается на паста и т.д., но он работает только с элементами ввода, а не с текстовой областью.)

И вот скрипка, использующая смесь ввода и события изменения: http://jsfiddle.net/trixta/jkQEX/

И если вы хотите иметь этот кросс-браузер, вы можете просто использовать webshims lib до polyfill. Вот пример x-браузера: http://jsfiddle.net/trixta/RN8PA/

Ответ 2

Поскольку эти классы всегда добавляются при отправке формы, удалите класс, предшествующий проверке:

$('#myForm').submit(function(){
    $('.invalid', this).removeClass('invalid'); // Remove all invalid classes
    $(this).removeClass('invalid');             // If the parent = form.
    // Normal validation procedure.
});

Ожидаемый результат:

Пользователь инициирует submit
onsubmit запускается > Все имена классов invalid в форме удаляются.
События invalid запускаются, а классы invalid добавляются при необходимости

Update

Добавлен дополнительный блок для вашей скрипки, см. обновленный скрипт: http://jsfiddle.net/ceArQ/10/. Я применил метод checkValidity() и свойство validity.valid. Теперь классы автоматически добавляются, когда вход недействителен.

document.addEventListener('keyup', function(e){
    var input = e.target;
    if (!$.nodeName(input, 'input')) return;
    input.checkValidity();
    var element = $(input).parent();
    if(input.validity.valid) {
        element.removeClass('invalid');
        element.parent().removeClass('invalid');
    } else { //Remove the lines below if you don't want to automatically add
             // classes when they're invalid.
        element.addClass('invalid');
        element.parent().removeClass('invalid');
    }
});

В режиме проверки ключа проверяется достоверность входного элемента. Если он действителен, класс invalid удаляется из родительского элемента.

Ответ 3

Вы можете привязать логику проверки к событиям focus и blur или быть более отзывчивыми к событию keyup.

$('input').keyup(function() {
    if(isValid(this)) {
        $(this).removeClass('invalid').parent().removeClass('invalid');
        $(this).addClass('valid').parent().addClass('invalid');
    }
    else {
        $(this).removeClass('valid').parent().removeClass('valid');
        $(this).addClass('invalid').parent().addClass('invalid');
    }
});

Ответ 4

Пробовали ли вы использовать :valid, чтобы указать, действительно ли поле. и имеющие недопустимые формы, просто сохраняйте свой стиль по умолчанию.

Затем вызов form.checkValidity() в обработчике отправки? (Браузер должен сообщить конечному пользователю, что элемент формы недействителен).