Пользовательская проверка формы HTML5, не отображающая пользовательскую ошибку изначально

Question

Основная форма HTML5 с пользовательской проверкой. Если представленное значение не является числом, браузер должен отображать сообщение об ошибке «Поле должно быть числом». Если вы введете «abc» и нажмите «Отправить» (или нажмите «Ввод»), поле будет помечено как недопустимое, но сообщение об ошибке не появится. Нажмите еще раз (или нажмите Enter), и он отобразит сообщение. Это поведение с двойной отправкой появляется в последних версиях Firefox, Chrome, Safari и IE в Windows и OS X. Вы заметите, что сообщение по умолчанию «это поле обязательно ...» появляется в первом представлении и не показывает странное поведение.

http://jsfiddle.net/6gsr3r4b/

Как и в сторону, я хорошо знаю, что эта проверка не будет работать в старых версиях IE и поле ввода может иметь тип number, который будет автоматически завершить эту проверку; это упрощенный пример моей проблемы только для демонстрационных целей.

Javscript

var form = document.getElementById("form"); 
var field = document.getElementById("field"); 

form.onsubmit = validateForm; 

function validateForm() { 

    if(isNaN(field.value)) { 
     field.setCustomValidity("Field must be a number."); 
    } else { 
     return true; 
    } 

    return false; 
} 

HTML

<form id="form"> 
    <label for="field">Favorite number</label> 
    <input type="text" id="field" required> 
    <input type="submit"> 
</form> 

Answer 1

setCustomValidity() функция не используется для обозначения поля недействительным, оно используется для хранения пользовательского сообщения, которые позже будут отображаться если поле помечено как недействительное. В коде вы вызываете функцию setCustomValidity() внутри обработчика проверки, который не вызывается до тех пор, пока не будет нажата кнопка отправки. Вот почему он появляется во второй раз, но не первый: потому что сообщение о действительности применяется после первого представления.

Вместо этого вы должны позвонить функции setCustomValidity() перед отправкой формы. Вы можете просто вызвать его при загрузке страницы. Ниже приведен модифицированный рабочий код. Если вы хотите иметь больше возможностей управления, вы также можете вызвать его из обработчика события onchange, чтобы вы могли вставлять логику, которая запускается всякий раз, когда содержимое поля обновляется.

var form = document.getElementById("form"); 
 
var field = document.getElementById("field"); 
 

 
form.onsubmit = validateForm; 
 

 
/* specify the message that will be displayed if the field is marked invalid */ 
 
field.setCustomValidity("Field must be a number."); 
 

 
/* this is the function that actually marks the field as valid or invalid */ 
 
function validateForm() { 
 

 
    if (!isNaN(field.value)) { 
 
     return true; 
 
    } 
 
    
 
    return false; 
 
}

<form id="form"> 
 
    <label for="field">Favorite number</label> 
 
    <input type="text" id="field" required /> 
 
    <input type="submit" /> 
 
</form>

jsFiddle Version

---

Как и в сторону, что вы делаете на самом деле может быть достигнуто на всех современных браузерах без использования JavaScript, используя HTML5 pattern attribute. Этот атрибут принимает регулярное выражение, и браузер использует его для обозначения содержимого поля как действительного или недействительного.

Вот что сеть в Mozilla разработчика должен сказать об атрибуте шаблона:

Pattern: Регулярное выражение, значение элемента управления сверяется. Шаблон должен соответствовать всему значению, а не только некоторому подмножеству. Используйте атрибут title, чтобы описать шаблон, чтобы помочь пользователю. Этот атрибут применяется, когда значением атрибута type является текст, поиск, tel, url или электронная почта; в противном случае он игнорируется. Язык регулярных выражений совпадает с языком JavaScript. Шаблон не окружен прямыми косыми чертами.

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

Ниже вы можете увидеть пример формы, которая принимает только цифры без использования JavaScript. Если ничего другого, это хороший способ обеспечить надежный откат для любого, у кого отключен Javascript, и он помогает с доступностью, потому что гораздо проще для программного обеспечения для скрипта или программного обеспечения для сбора полезной информации из регулярного выражения, чем от пользователя -подписанная функция проверки.

input[type="text"]:invalid { 
 
    background-color: red; 
 
} 
 
input[type="text"]:valid { 
 
    background-color: green; 
 
}

<form id="form"> 
 
    <label for="field">Favorite number</label> 
 
    <input type="text" id="field" pattern="\d*" title="Field must be a number." required /> 
 
    <input type="submit" /> 
 
</form>