Прослушиватель событий действителен для форм HTML5

Question

1. Новое в HTML5 - это недопустимое событие, к которому вы можете добавить прослушиватель:

   document.addEventListener('invalid', function(e){
      var element = $(e.target);
      element.addClass("invalid");
      element.parent().addClass("invalid");
   }, true);
   

   Обратите внимание, это событие работает только при отправке формы ... Если я ввожу стиль ввода input:invalid { background: red }, стиль применяется, когда пользователь начинает печатать, а его ввод недопустим. Это событие запускается только при отправке? Я попытался добавить слушателя к самим входам вместо документа, и это не сработало.

2. Я добавляю слушателя, чтобы применить стиль к родительскому элементу ввода ... Теперь, когда пользователь исправляет его, он снова действителен ... Я знаю, что нет "действительного" события, поэтому как я могу сделать это?

---

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

Заранее спасибо,

1022 * Óscar *

Answer 1

Для решения вашей проблемы вы должны использовать псевдо-селектор: invalid и событие input или change.

$(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 для полифилла. Вот пример x-браузера: http://jsfiddle.net/trixta/RN8PA/

Answer 2

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

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

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

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

Обновление

Добавлен дополнительный блок в вашу скрипку, см. Обновленная скрипта: 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 удаляется из его родителя.

Answer 3

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

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

Answer 4

Вы можете привязать свою логику проверки к событиям 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');
    }
});