Почему мой атрибут "oninvalid" допускает сбой шаблона?

Это небольшое поле пароля HTML5 отлично работает БЕЗ атрибута oninvalid (шаблон говорит: минимум 6 символов):

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

Смотрите jsFiddle здесь.

Но когда я добавляю атрибут oninvalid, который выдает собственное сообщение об ошибке, когда пользовательский ввод не соответствует шаблону, все поле NEVER становится действительным, см. здесь код:

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

Смотрите jsFiddle здесь.

Вы можете определить ошибку?

Ответы

Ответ 1

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

<input type="password" name="user_password_new" pattern=".{6,}" required
   oninvalid="setCustomValidity('Minimum length is 6 characters')" 
   oninput="setCustomValidity('')" />

Ответ 2

Поскольку я наткнулся на ту же проблему, вот мое решение - протестировано и работает с FF, Chrome, IE 10, Edge (февраль 2017).

<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>

Ответ 3

Мне нравится использовать вот так:

<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>

И отключен для всех допустимых входных данных

UPD, еще одна вещь для лучшей работы:

    $("input").attr("onblur", "setCustomValidity('')");
    $("input").attr("oninput", "setCustomValidity(' ')");

Ответ 4

Вы можете использовать title, пока вы не возражаете против 'You must use this format:' перед своим сообщением. Если вы хотите получить полное пользовательское сообщение, setCustomValidity() работал у меня.

Ответ 5

Хотя ответы на этот вопрос имели хорошую информацию, их было недостаточно для моих нужд. Мне нужно отображать разные сообщения в зависимости от того, какое правило допустимости не удалось. В других примерах одно и то же сообщение об ошибке проверки используется для всех отказов валидации.

Свойство "validity" объекта формы содержит ключ к созданию более одного сообщения об ошибке проверки.

Вы можете просмотреть все свойства свойства "действительность" на этом веб-сайте.

https://www.w3schools.com/js/js_validation_api.asp

В этом примере показано, как отображать два разных сообщения проверки. Если вы раскомментируете приведенную ниже строку console.log(), вы можете посмотреть изменение свойства действительности при вводе в поле.

<label for="user_password_new">New Password:</label>
<input type="password" name="user_password_new" id="user_password_new"
    pattern=".{6,}"
    value=""
    required
    oninput="
        setCustomValidity('');
        checkValidity();
        // console.log(validity);
        if (validity.patternMismatch) {
            setCustomValidity('Please enter at least six characters.');
        }
        else if (validity.valueMissing) {
            setCustomValidity('This field is required.');
        }
        else if (validity.valid) {
            setCustomValidity('');
        }
        // allow default validation message to appear for other validation failures
    "
>

ПРИМЕЧАНИЕ. Некоторые проверки действительности относятся к типу. Например, атрибуты "rangeOverflow", "rangeUnderflow" и "stepMismatch" устанавливаются, если тип использует их; TYPE = "число".