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

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

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

Это самая важная часть:

    oninput="setCustomValidity('')"

Очень просто управлять настраиваемыми сообщениями с помощью HTML5 event oninvalid

Вот код:

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

Примечание.. Это больше не работает в 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. Я не уверен, в какой версии это изменилось.

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

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

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

Там есть демон в jsFiddle.

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

Вот код:

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

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

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

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

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

HTML:

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           name="email" oninput="InvalidMsg(this);"  
           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/

Самый простой и самый чистый способ, который я нашел, - использовать атрибут data для хранения вашей пользовательской ошибки. Проверьте работоспособность node и обработайте ошибку, используя какой-то пользовательский 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>

Это очень простое управление требуемым сообщением типа ввода HTML. Нет необходимости в JS или CSS использовать HTML5.

Сначала вы можете использовать этот атрибут "oninvalid"

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">

Или вы можете использовать атрибут "oninput"

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">

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

Для флажков:

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

Для входов:

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