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

Я пытаюсь использовать проверку на стороне клиента HTML5 вне контекста form/submit, но не вижу, как отображать пузыри ошибки проверки. Рассмотрим следующее:

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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

Попробуйте это

document.getElementById('Id').setCustomValidity('Error');