Лекция: 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

<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, чтобы положить красную рамку вокруг поля ввода, если значение является недопустимым.

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

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

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

Полное имя:

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

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

Дата заезда:

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

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

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

This is the HTML and JavaScript for the form:

This is the CSS that goes with the form code: