Как программно отобразить пузырьки ошибок проверки HTML5 на стороне клиента?

Question

Я пытаюсь использовать проверку на стороне клиента HTML5 вне контекста формы / отправки, но не вижу, как отобразить всплывающие сообщения об ошибках проверки. Учтите следующее:

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')">
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button>

Все работает, как и ожидалось, с правильным значением, возвращаемым из checkValidity, и с отправкой и отображением неверного события, но как мне программно отобразить сообщение об ошибке проверки?

Answer 1

Если вы говорите об этом пузыре:

См. Комментарий ScottR к этому ответу.

... тогда мое тестирование показывает, что и Firefox, и Chrome отображают его при вызове checkValidity для элемента, заключенного в ( testcase ), но не на отдельном элементе ( testcase ).

Кажется, что нет механизма для его отображения, когда формы нет, а спецификация даже не говорит , что она должна отображаться в ответ на программные вызовы checkValidity (на элемент или форма) - только при отправке формы.

Итак, пока оберните ваши элементы в форму, даже если вы на самом деле не отправите ее.

Еще лучше, используйте свой собственный пользовательский интерфейс проверки, это защитит вас от будущих изменений в браузерах в этой недостаточно определенной области.

Answer 2

Просто установите вручную «неверный» атрибут в неправильные поля.Маленький пример:

var form = $('#myForm').get(0);
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) {
    $('input:required').each(function(cnt, item) {
        if(!$(item).val()) {
            $(item).attr('invalid', 'invalid');
        }
    });
    return false;
}

Answer 3

Попробуйте использовать required="required" и избавиться от обработчика oninvalid, если он вам действительно не нужен.

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

Пример этой работы: https://support.mozilla.com/en-US/users/register