Set custom validity

Позволяет задать ваше собственно собщение валидации.

<form action="">

<div><input type=" email " name=" email " required/></div>

<div><input type=" password " name=" pass1 " required/></div>

<div><input type=" password " name=" pass2 " required/></div>

<div><input type=" submit " value=" Register "/></div>

</form>

<script>

document.querySelector('input[name="pass2"]')

.addEventListener("input", function (e){

if (this.value!= document.querySelector('input[name="pass1"]')

.value)this.setCustomValidity("The two passwords must match.");

else

this.setCustomValidity("");

}, true);

</script>

autocomplete уточняет, что поле должно /не должно автозаполнятся или быть предварительно заполнена браузером, на основании прошлых записей пользователя. Это может быть, например, номер кредитной карты или одноразовый пароль. По умолчанию автозаполнение включено, если вы хотите отключить, установите его в положение OFF. dirname для подачи направленности кон-TROL с формой.

Валидация формы использует код JavaScript или библиотеку, чтобы делать проверку входных данных или обеспечить заполнение необходимых полей перед отправкой формы. Есть и другие методы проверки, например атрибут required

Если атрибут required присутствует, то поле должно содержать значение при отправке формы. Вот пример строки ввода адреса электронной почты. гарантирует, что поле имеет значение и что значение действительный адрес электронной почты, как определено здесь.
<input type="email" id="email_addr" name="email_addr" required />Pattern-атрибут для проверки значения элемента с регулярным выражением.Атрибут pattern содержит регулярное выражение, используемое для проверки поля ввода. Для примера, предположим, что номер состоит из трех прописных букв следуют четыре цифры. Использование необходимых и структура обеспечения того, чтобы поле имеет значение и что значение соответствует правильный формат для номера детали. Если пользователь находится над полем, сообщение в названии атрибута не отображается.

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>

Основываясь на предыдущем примере, вы также можете обозначить поле ввода красным цветом, если неверный номер части вводится. Чтобы сделать это, добавьте в CSS, чтобы положить красную рамку вокруг поля ввода, если значение является недопустимым.

:invalid { border: 2px solid #ff0000;}

novalidate – атрибут используется для отключения проверки данных формы.
Formnovalidate атрибут может применяться для input or button элементов. Если оно есть, то проверка данных формы отключено. Вот пример, где отправке формы с помощью кнопки Отправить требует допустимых входных данных, но и представления с помощью кнопки

<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/><input type="submit" formnovalidate value="Save"><input type="submit" value="Submit">

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

<label>Email:</label><input type="email" id="email_addr" name="email_addr"><label>Repeat Email Address:</label><input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)"><script>function check(input) { if (input.value!= document. getElementById('email_addr').value) { input.setCustomValidity('The two email addresses must match.'); } else { // input is valid -- reset the error message input.setCustomValidity(''); }}</script>

Собираем все вместе. Вот пример формы заявки

Полное имя:

Адрес электронной почты:

Повторите адрес электронной почты:

Дата заезда:

Количество ночей (номера $ 99,00 за ночь):

Количество гостей (каждый дополнительный гость добавляет $ 10,00 за ночь):

Предполагаемая общая сумма: $ 99.00
Промо-код:
Это HTML и JavaScript для формы:

This is the HTML and JavaScript for the form:

<form oninput="total.value = (nights.valueAsNumber * 99) + ((guests.valueAsNumber - 1) * 10)"> <label>Full name:</label> <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required> <label>Email address:</label> <input type="email" id="email_addr" name="email_addr" required> <label>Repeat email address:</label> <input type="email" id="email_addr_repeat" name="email_addr_repeat" required oninput="check(this)"> <label>Arrival date:</label> <input type="date" id="arrival_dt" name="arrival_dt" required> <label>Number of nights (rooms are $99.00 per night):</label> <input type="number" id="nights" name="nights" value="1" min="1" max="30" required> <label>Number of guests (each additional guest adds $10.00 per night):</label> <input type="number" id="guests" name="guests" value="1" min="1" max="4" required> <label>Estimated total:</label> $<output id="total" name="total">99</output>.00 <br><br> <label>Promo code:</label> <input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" title="Promo codes consist of 6 alphanumeric characters."> <input type="submit" value="Request Reservation" /> </form><script>function check(input) { if (input.value!= document.getElementById('email_addr').value) { input.setCustomValidity('The two email addresses must match.'); } else { // input is valid -- reset the error message input.setCustomValidity(''); }}</script>

This is the CSS that goes with the form code: