HTML5 форма обязательный атрибут.Установить пользовательское сообщение проверки?

Question

У меня есть следующая форма HTML5: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

В настоящее время, когда я нажимаю клавишу ввода, когда они оба пусты, появляется всплывающее окно с надписью «Пожалуйста, заполните это поле».Как бы изменить это сообщение по умолчанию на «Это поле нельзя оставить пустым»?

РЕДАКТИРОВАТЬ: Также обратите внимание, что сообщение об ошибке в поле типа пароля просто *****.Чтобы воссоздать это, введите имя пользователя и нажмите «Отправить».

РЕДАКТИРОВАТЬ : я использую Chrome 10 для тестирования.Пожалуйста, сделайте то же самое

Answer 1

Использование setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

I изменен на ванильный JavaScript из Mootools, как предложено @ itpastorn в комментариях, но при необходимости вы сможете выработать эквивалент Mootools.

Редактировать

Я обновил код здесь, так как setCustomValidity работает немного иначе, чем я понял, когда первоначально отвечал. Если для setCustomValidity установлено значение, отличное от пустой строки, это поле будет считаться недействительным; поэтому вы должны очистить его перед проверкой действительности, вы не можете просто установить его и забыть.

Дальнейшее редактирование

Как указано в комментарии @ thomasvdb ниже, вам нужно очистить пользовательскую допустимость в некоторых событиях за пределами invalid, в противном случае может быть дополнительный проход через обработчик oninvalid для его очистки.

Answer 2

Вот код для обработки пользовательского сообщения об ошибке в HTML5

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />

Эта часть важна, потому что она скрывает сообщение об ошибке, когда пользователь вводит новые данные:

oninput="this.setCustomValidity('')"

Answer 3

Управлять пользовательскими сообщениями очень просто с помощью HTML5 события oninvalid

Вот код:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

Это самое важное:

onvalid="this.setCustomValidity('')"

Answer 4

Примечание: Это больше не работает в Chrome, не тестировалось в других браузерах. Смотрите правки ниже. Этот ответ оставлен здесь для исторической справки.

Если вы чувствуете, что строка проверки действительно не должна задаваться кодом, вы можете установить атрибут заголовка входного элемента следующим образом: «Это поле нельзя оставлять пустым». (Работает в Chrome 10)

title="This field should not be left blank."

См. http://jsfiddle.net/kaleb/nfgfP/8/

А в Firefox вы можете добавить этот атрибут:

x-moz-errormessage="This field should not be left blank."

Редактировать

Это, кажется, изменилось, так как я первоначально написал этот ответ. Теперь добавление заголовка не меняет достоверность сообщения, оно просто добавляет приложение к сообщению. Приведенная выше скрипка все еще применяется.

Редактировать 2

Chrome теперь ничего не делает с атрибутом title начиная с Chrome 51. Я не уверен, в какой версии это изменилось.

Answer 5

Если установить и отменить установку setCustomValidity в нужное время, сообщение проверки будет работать безупречно.

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

Я использовал onchange вместо oninput, что является более общим и происходит, когдазначение изменяется при любых условиях даже через JavaScript.

Answer 6

Я сделал небольшую библиотеку для облегчения изменения и перевода сообщений об ошибках.Вы даже можете изменить текст по типу ошибки, который в настоящее время недоступен, используя title в Chrome или x-moz-errormessage в Firefox.Идите , проверьте его на GitHub и оставьте отзыв.

Он используется как:

<input type="email" required data-errormessage-value-missing="Please input something">

На jsFiddle . * Имеется демо .1012 *

Answer 7

Управлять пользовательскими сообщениями очень просто с помощью события HTML5 oninvalid

Вот код:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

Answer 8

Попробуйте этот, его лучше и проверено:

HTML:

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value === '') {
        textbox.setCustomValidity('Required email address');
    } else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity('please enter a valid email address');
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}

Демо:

http://jsfiddle.net/patelriki13/Sqq8e/

Answer 9

Самый простой и чистый способ, который я нашел, - это использовать атрибут данных для хранения вашей пользовательской ошибки. Проверьте правильность узла и обработайте ошибку, используя некоторый пользовательский html.

le javascript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

и немного супер HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

Answer 10

У меня есть более простое решение vanilla js only:

Для флажков:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

Для входов:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};