<input>: Элемент ввода (элемент формы)

Функционирование элемента <input> существенно зависит от значения его атрибута type, поэтому различные типы описаны на отдельных страницах справочника. Если этот атрибут не указан, по умолчанию используется text.

Доступные типы:

accept

Действительно только для типа ввода file, атрибут accept определяет типы файлов, которые можно выбрать в элементе управления загрузкой file. См. тип ввода file.

alt

Действительно только для кнопки image, атрибут alt предоставляет альтернативный текст для изображения, отображая значение атрибута, если изображение src отсутствует или по какой-либо причине не загружается. См. тип ввода image.

autocapitalize

Управляет автоматическим прописным регистром вводимого текста и, если это необходимо, способом его применения. Более подробную информацию см. на странице глобального атрибута autocapitalize.

autocomplete

(Не булев атрибут!) Атрибут autocomplete принимает в качестве значения строку, разделенную пробелами, которая описывает, какие, если таковые имеются, типы функций автозаполнения должно предоставлять поле ввода. Типичная реализация автозаполнения вызывает ранее введенные значения в том же поле ввода, но могут существовать и более сложные формы автозаполнения. Например, браузер может интегрироваться со списком контактов устройства, чтобы автозаполнить email адреса в поле ввода электронной почты. См. autocomplete для допустимых значений.

Атрибут autocomplete действителен для hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, и password. Этот атрибут не влияет на типы ввода, которые не возвращают числовые или текстовые данные, и действителен для всех типов ввода, за исключением checkbox, radio, file, или любого из типов кнопок.

Дополнительную информацию, включая информацию о безопасности паролей и том, как autocomplete отличается для hidden от других типов ввода, см. в атрибуте autocomplete.

autofocus

Булев атрибут, который, если присутствует, указывает, что ввод должен автоматически получить фокус после загрузки страницы (или когда диалоговое окно <dialog>, содержащее элемент, было отображено).

Примечание: Элемент с атрибутом autofocus может получить фокус до вызова события DOMContentLoaded.

В документе не должно быть более одного элемента с атрибутом autofocus. Если он установлен на нескольких элементах, фокус получит первый элемент с этим атрибутом.

Атрибут autofocus не может быть использован для полей ввода типа hidden, так как скрытые поля ввода не могут получить фокус.

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

При применении атрибута autofocus следует с осторожностью относиться к доступности. Автоматический фокус на элементе может привести к прокрутке страницы при загрузке. Фокус также может вызвать отображение динамической клавиатуры на некоторых сенсорных устройствах. Хотя программа чтения с экрана объявит метку элемента формы, получившего фокус, программа чтения с экрана ничего не объявит до метки, и пользователь с нормальным зрением на маленьком устройстве также пропустит контекст, созданный предшествующим содержимым.

capture

Введён в спецификации HTML Media Capture и действителен только для типа ввода file, атрибут capture определяет, какой медиа — микрофон, видео или камера — должен использоваться для захвата нового файла для загрузки с помощью элемента управления загрузкой file в поддерживаемых сценариях. См. тип ввода file.

checked

Действителен для типов radio и checkbox, атрибут checked является булевым. Если он присутствует в элементе типа radio, это указывает, что выбранная радиокнопка является текущей в группе радиокнопок с одинаковыми именами. Если он присутствует в элементе типа checkbox, это указывает, что флажок установлен по умолчанию при загрузке страницы. Он не указывает, установлен ли флажок в данный момент: если состояние флажка изменяется, этот атрибут не отражает изменения. (Обновляется только атрибут IDL HTMLInputElement's checked).

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

Например, если флажок, у которого name равно fruit, имеет value равное cherry, и флажок выбран, данные формы будут включать fruit=cherry. Если флажок не активен, он вообще не отображается в данных формы. Значение value по умолчанию для флажков и радиокнопок равно on.

dirname

Действителен для типов ввода hidden, text, search, url, tel и email, атрибут dirname позволяет отправлять направление элемента. При включении элемент управления формой отправит две пары имя/значение: первая — name и value, а вторая — значение атрибута dirname в качестве имени со значением ltr или rtl, установленным браузером.

html

<form action="page.html" method="post">
  <label>
    Fruit:
    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

При отправке формы выше, элемент ввода вызовет отправку обеих пар name / value fruit=cherry и пары dirname / direction fruit-dir=ltr. Более подробная информация приведена в атрибуте dirname.

disabled

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

В частности, отключенные элементы ввода не получают событие click, и отключенные элементы ввода не отправляются вместе с формой.

Примечание: Хотя это не требуется в спецификации, браузер Firefox по умолчанию сохраняет динамическое состояние disabled элемента <input> при перегрузке страницы. Используйте атрибут autocomplete для управления этой функцией.

form

Строка, указывающая элемент <form>, с которым связан элемент ввода (то есть его владелец формы). Если это значение присутствует, оно должно совпадать со значением id элемента <form> в том же документе. Если этот атрибут не указан, элемент <input> связан с ближайшей содержащей формой, если таковая имеется.

Атрибут form позволяет размещать элемент ввода в любом месте документа, но включать его в форму в другом месте документа.

Примечание: Элемент ввода может быть связан только с одной формой.

formaction

Действительно только для типов ввода image и submit. Более подробная информация представлена в типе ввода submit.

formenctype

Действительно только для типов ввода image и submit. Более подробная информация представлена в типе ввода submit.

formmethod

Действительно только для типов ввода image и submit. Более подробная информация представлена в типе ввода submit.

formnovalidate

Действительно только для типов ввода image и submit. Более подробная информация представлена в типе ввода submit.

formtarget

Действительно только для типов ввода image и submit. Более подробная информация представлена в типе ввода submit.

height

Действительно только для кнопки ввода изображения image, атрибут height задает высоту файла изображения, отображаемого для представления графической кнопки отправки. См. тип ввода image.

id

Глобальный атрибут, действительный для всех элементов, включая все типы ввода, он определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентифицировать элемент при ссылке. Значение используется в качестве значения атрибута <label>'s for для связывания метки с элементом управления формой. См. <label>.

inputmode

Глобальное значение, действительное для всех элементов, оно предоставляет подсказку браузерам о типе конфигурации виртуальной клавиатуры, которую следует использовать при редактировании этого элемента или его содержимого. Значения включают none, text, tel, url, email, numeric, decimal, и search.

list

Значение, задаваемое атрибуту list, должно быть id элемента <datalist>, расположенного в том же документе. Атрибут <datalist> предоставляет список предопределённых значений, чтобы предложить пользователю варианты для этого элемента ввода. Любые значения в списке, не совместимые с type, не включаются в предлагаемые варианты. Предоставляемые значения являются предложениями, а не требованиями: пользователи могут выбрать из этого предопределённого списка или ввести другое значение.

Он допустим для text, search, url, tel, email, date, month, week, time, datetime-local, number, range, и color.

Согласно спецификациям, атрибут list не поддерживается hidden, password, checkbox, radio, file, или любыми типами кнопок.

В зависимости от браузера, пользователь может увидеть предлагаемую собственную цветовую палитру, отметки вдоль диапазона или даже элемент ввода, открывающийся как <select>, но позволяющий вводить значения, отсутствующие в списке. Проверьте таблицу совместимости с браузерами по ссылке browser compatibility table для других типов элементов ввода.

См. элемент <datalist>.

max

Допустимо для date, month, week, time, datetime-local, number, и range, он определяет наибольшее значение в диапазоне допустимых значений. Если введённое value превышает это значение, элемент не проходит валидацию ограничений. Если значение атрибута max не является числом, элемент не имеет максимального значения.

Существует специальный случай: если тип данных периодический (например, для дат или времени), значение max может быть меньше значения min, что указывает на то, что диапазон может циклически повторяться; например, это позволяет задать диапазон времени с 22:00 до 4:00.

maxlength

Допустимо для text, search, url, tel, email, и password, оно определяет максимальную длину строки (измеряемую в единицах кода UTF-16), которую пользователь может ввести в поле. Это должно быть целое число 0 или больше. Если атрибут maxlength не указан или указано недопустимое значение, у поля нет максимальной длины. Это значение также должно быть больше или равно значению minlength.

Ввод не пройдёт валидацию ограничений, если длина текста, введённого в поле, превышает maxlength единиц кода UTF-16. По умолчанию браузеры предотвращают ввод пользователем большего количества символов, чем разрешено атрибутом maxlength. Валидация ограничений применяется только при изменении значения пользователем. Подробнее см. Client-side validation.

min

Допустимо для date, month, week, time, datetime-local, number, и range, оно определяет наименьшее значение в диапазоне допустимых значений. Если введённое value меньше этого значения, элемент не проходит валидацию ограничений. Если значение атрибута min не является числом, элемент не имеет минимального значения.

Это значение должно быть меньше или равно значению атрибута max. Если атрибут min присутствует, но не указан или является недопустимым, никакое значение min не применяется. Если атрибут min корректен и непустое значение меньше минимального, разрешённого атрибутом min, валидация ограничений предотвратит отправку формы. Подробнее см. Client-side validation.

Существует специальный случай: если тип данных периодический (например, для дат или времени), значение max может быть меньше значения min, что указывает на то, что диапазон может циклически повторяться; например, это позволяет задать диапазон времени с 22:00 до 4:00.

minlength

Допустимо для text, search, url, tel, email, и password, оно определяет минимальную длину строки (измеряемую в единицах кода UTF-16), которую пользователь может ввести в поле ввода. Это должно быть неотрицательное целое значение, меньшее или равное значению, указанному в maxlength. Если атрибут minlength не указан или указано недопустимое значение, у элемента нет минимальной длины.

Ввод не пройдёт валидацию ограничений, если длина текста, введённого в поле, меньше minlength единиц кода UTF-16, что предотвратит отправку формы. Валидация ограничений применяется только при изменении значения пользователем. Подробнее см. Client-side validation.

multiple

Булевый атрибут multiple, если установлен, означает, что пользователь может ввести разделенные запятыми адреса электронной почты в виджете электронной почты или может выбрать несколько файлов с помощью элемента ввода file. См. типы ввода email и file.

name

Строка, определяющая имя элемента управления вводом. Это имя отправляется вместе со значением элемента управления при отправке данных формы.

Рассматривайте атрибут name как обязательный (даже если он таковым не является). Если у элемента ввода нет указанного name, или name пусто, значение элемента ввода не отправляется с формой! (Отключённые элементы управления, неотмеченные радиокнопки, неотмеченные флажки и кнопки сброса также не отправляются.)

Существует два особых случая:

1. _charset_ : Если используется в качестве имени элемента <input> типа hidden, атрибут value автоматически устанавливается браузером до используемой кодировки символов для отправки формы.
2. isindex: По историческим причинам, имя isindex не разрешено.

Атрибут name создаёт уникальное поведение для радиокнопок.

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

При переключении на ряд радиокнопок с одинаковым именем, если одна из них выбрана, фокус будет переходить на неё. Если они не расположены последовательно в исходном порядке, если одна из радиокнопок выбрана, переключение фокуса на элементы группы начинается с первой выбранной радиокнопки в группе, пропуская все невыбранные. Другими словами, при выборе одной радиокнопки переключение фокуса пропускает невыбранные радиокнопки в группе. Если ни одна не выбрана, фокус переходит на радиокнопку в группе при достижении первой в том же имени группы.

После того, как фокус перешёл на одну из радиокнопок в группе, использование клавиш со стрелками позволит переходить по всем радиокнопкам с тем же именем, даже если радиокнопки не расположены последовательно в исходном порядке.

Если элементу ввода задано имя, это имя становится свойством элемента формы owning form element's HTMLFormElement.elements. Если у вас есть элемент ввода, у которого name задано как guest и другой, у которого name задано как hat-size, следующий код можно использовать:

js

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

После выполнения этого кода guestName будет HTMLInputElement для поля guest, а hatSize — объектом для поля hat-size.

Предупреждение: Избегайте задания элементам формы имени, соответствующего встроенному свойству формы, так как вы затем переопределите предопределённое свойство или метод этой ссылкой на соответствующий элемент ввода.

pattern

Действительно для text, search, url, tel, email, и password, атрибут pattern определяет регулярное выражение, которому должно соответствовать значение value ввода для успешной проверки ограничений. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp, и как описано в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, чтобы шаблон обрабатывался как последовательность кодовых точек Юникода, а не как ASCII. В тексте шаблона не должны указываться слэши.

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

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

Дополнительную информацию см. в разделе Проверка на стороне клиента.

placeholder

Действительно для text, search, url, tel, email, password, и number, атрибут placeholder предоставляет краткое напоминание пользователю о том, какой тип информации ожидается в поле. Это должно быть слово или короткая фраза, которая даёт подсказку о ожидаемом типе данных, а не объяснение или запрос. Текст не должен содержать возвраты каретки или переводы строк. Например, если от поля ожидается ввод имени пользователя, а метка — "Имя", подходящим заполнительным текстом может быть "например, Иван Петров".

Примечание: Атрибут placeholder не так семантически полезен, как другие способы объяснения вашей формы, и может вызвать непредвиденные технические проблемы с вашим контентом. Дополнительную информацию см. в разделе Метки.

popovertarget

Преобразует элемент <input type="button"> в кнопку управления всплывающей подсказкой; принимает идентификатор элемента всплывающей подсказки для управления в качестве значения. Дополнительные сведения см. на странице документации API всплывающей подсказки.

popovertargetaction

Указывает действие, которое должно быть выполнено над элементом всплывающей подсказки, управляемым элементом управления <input type="button">. Возможные значения:

"hide"

Кнопка скроет отображаемую всплывающую подсказку. Если вы попытаетесь скрыть уже скрытую подсказку, никаких действий не будет.

"show"

Кнопка отобразит скрытую всплывающую подсказку. Если вы попытаетесь отобразить уже отображаемую подсказку, никаких действий не будет.

"toggle"

Кнопка переключит всплывающую подсказку между отображением и скрытием. Если подсказка скрыта, она будет отображена; если она отображается, она будет скрыта. Если popovertargetaction опущено, "toggle" является по умолчанию действием, которое будет выполнено кнопкой управления.

readonly

Булевый атрибут, который, если присутствует, указывает, что пользователь не должен иметь возможность редактировать значение ввода. Атрибут readonly поддерживается типами ввода text, search, url, tel, email, date, month, week, time, datetime-local, number, и password.

Дополнительную информацию см. в разделе Атрибут HTML: readonly.

required

required — булевый атрибут, который, если присутствует, указывает, что пользователь должен указать значение для ввода перед отправкой содержащей его формы. Атрибут required поддерживается типами ввода text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, и file.

Дополнительную информацию см. в разделе Проверка на стороне клиента и в разделе Атрибут HTML: required.

size

Действительно для email, password, tel, url, и text, атрибут size задаёт, сколько ввода будет видно. В основном, создаёт тот же результат, что и установка свойства CSS width с несколькими особенностями. Фактическая единица значения зависит от типа ввода. Для password и text это количество символов (или единиц em), по умолчанию 20, а для других — пиксели (или единицы px). Свойство CSS width имеет приоритет над атрибутом size.

src

Действительно только для кнопки ввода image, src — строка, определяющая URL-адрес файла изображения для отображения в качестве графической кнопки отправки. См. тип ввода изображение.

step

Действительно для date, month, week, time, datetime-local, number, и range, атрибут step — число, определяющее степень детализации, которой должно соответствовать значение.

Если не указано явно:

• step по умолчанию равен 1 для number и range.
• Каждый тип ввода даты/времени имеет значение step по умолчанию, соответствующее типу; см. страницы отдельных элементов ввода: date, datetime-local, month, time, и week.

Значение должно быть положительным числом — целым или дробным — или специальным значением any, что означает отсутствие предполагаемого шага, и любое значение допустимо (кроме других ограничений, таких как min и max).

Если any не задано явно, допустимые значения для number, даты/времени и range типов ввода равны основанию шага — значению min и приращениям значения шага до значения max, если указано.

Например, если у вас есть <input type="number" min="10" step="2">, то любое чётное целое число, 10 или больше, допустимо. Если опущено, <input type="number">, любое целое число допустимо, но десятичные значения (например, 4.2) не допустимы, потому что step по умолчанию равен 1. Чтобы 4.2 было допустимым, step должно было быть установлено на any, 0,1, 0,2 или любое значение min, которое должно заканчиваться .2, например <input type="number" min="-5.2">.

Примечание: Когда введенные пользователем данные не соответствуют конфигурации шагов, значение считается недействительным при проверке ограничений и будет соответствовать псевдоклассу :invalid.

Дополнительную информацию см. в разделе Проверка на стороне клиента.

tabindex

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

title

Глобальный атрибут, допустимый для всех элементов, включая все типы ввода, содержащий текст, представляющий справочную информацию, относящуюся к элементу, к которому он относится. Такая информация обычно, но необязательно, может быть представлена пользователю в виде всплывающей подсказки. Не следует использовать заголовок в качестве основного объяснения назначения элемента управления формой. Вместо этого используйте элемент <label> с атрибутом for, установленным на атрибут id элемента управления формой. См. раздел Метки ниже.

type

Строка, определяющая тип рендеринга элемента управления. Например, для создания флажка используется значение checkbox. Если опущено (или указано неизвестное значение), используется тип ввода text, создавая поле ввода обычного текста.

Допустимые значения перечислены в разделе Типы ввода выше.

value

Значение элемента управления вводом. При указании в HTML это начальное значение, которое впоследствии может быть изменено или получено в любое время с помощью JavaScript для доступа к соответствующему объекту HTMLInputElement свойству value. Атрибут value всегда является необязательным, хотя следует считать его обязательным для checkbox, radio, и hidden.

width

Действительно только для кнопки ввода изображения image, width — это ширина файла изображения, отображаемого для представления графической кнопки отправки. См. тип ввода image.

Помимо использования CSS для стилизации элементов ввода на основе состояния :valid или :invalid UI-состояний, основываясь на текущем состоянии каждого элемента ввода, как указано в разделе «UI-псевдоклассы» выше, браузер предоставляет возможность клиентской валидации при (попытке) отправки формы. При отправке формы, если какой-либо элемент управления формой не проходит проверку, поддерживающие браузеры отобразят сообщение об ошибке на первом некорректном элементе управления формы; отображая стандартное сообщение, основанное на типе ошибки, или сообщение, заданное вами.

Некоторые типы элементов ввода и другие атрибуты устанавливают ограничения на допустимые значения для данного элемента ввода. Например, <input type="number" min="2" max="10" step="2"> означает, что допустимы только числа 2, 4, 6, 8 или 10. Могут возникнуть несколько ошибок, включая ошибку rangeUnderflow если значение меньше 2, rangeOverflow если оно больше 10, stepMismatch если значение находится между 2 и 10, но не является четным целым числом (не соответствует требованиям атрибута step), или typeMismatch если значение не является числом.

Для типов ввода, область возможных значений которых является периодической (то есть при достижении наибольшего возможного значения, значения циклически возвращаются к началу, а не заканчиваются), возможно обратное значение свойств max и min, что указывает на то, что диапазон допустимых значений начинается с min, циклически возвращается к наименьшему возможному значению, а затем продолжается до достижения max. Это особенно полезно для дат и времени, например, когда нужно разрешить диапазон от 20:00 до 8:00:

<input type="time" min="20:00" max="08:00" name="overnight" />

Конкретные атрибуты и их значения могут привести к определённой ошибке ValidityState:

Если у элемента управления формой нет атрибута required, отсутствует значение или пустая строка, то это не является ошибкой. Даже если указанные выше атрибуты присутствуют, за исключением required, пустая строка не приведёт к ошибке.

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

В дополнение к описанным выше ошибкам, интерфейс validityState содержит булевы свойства badInput, valid, и customError. Объект проверки содержит:

• validityState.valueMissing
• validityState.typeMismatch
• validityState.patternMismatch
• validityState.tooLong
• validityState.tooShort
• validityState.rangeUnderflow
• validityState.rangeOverflow
• validityState.stepMismatch
• validityState.badInput
• validityState.valid
• validityState.customError

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

Если возникла ошибка, поддерживающие браузеры выведут сообщение об ошибке пользователю и не позволят отправить форму. Важное замечание: если пользовательское сообщение об ошибке имеет значение, отличное от пустой строки или null, отправка формы будет запрещена. Если нет сообщения об ошибке и ни одно из других свойств не возвращает true, valid будет true, и форму можно отправить.

function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("A value is required");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("Your value is too low");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("Your value is too high");
  } else {
    input.setCustomValidity("");
  }
}

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

Пример пользовательской ошибки валидации

Если вы хотите отобразить пользовательское сообщение об ошибке, когда поле не проходит валидацию, вам необходимо использовать API проверки ограничений API проверки ограничений, доступный для элементов <input> (и родственных). Рассмотрим следующую форму:

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Submit</button>
</form>

Основные функции HTML-валидации формы приведут к отображению стандартного сообщения об ошибке, если вы попытаетесь отправить форму с пустым или не соответствующим pattern значением.

Если вы хотите вместо этого отображать пользовательские сообщения об ошибках, вы можете использовать JavaScript, как показано ниже:

const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity("Enter your username!");
  } else {
    nameInput.setCustomValidity(
      "Usernames can only contain upper and lowercase letters. Try again!",
    );
  }
});

Пример отображения:

Вкратце:

• Мы проверяем состояние валидности элемента ввода каждый раз, когда его значение изменяется, вызывая метод checkValidity() через обработчик события input.
• Если значение некорректно, возникает событие invalid, и выполняется функция обработчика события invalid. Внутри этой функции мы определяем, является ли значение некорректным из-за того, что оно пустое, или из-за того, что оно не соответствует шаблону, используя блок if (), и устанавливаем пользовательское сообщение об ошибке валидации.
• В результате, если значение ввода некорректно при нажатии кнопки отправки, будет отображено одно из пользовательских сообщений об ошибках.
• Если значение корректно, форма будет отправлена, как ожидается. Для этого пользовательское сообщение проверки должно быть отменено, вызвав setCustomValidity() с пустым значением. Поэтому мы делаем это каждый раз, когда возникает событие input. Если вы этого не сделаете, и ранее было установлено пользовательское сообщение проверки, элемент ввода будет регистрироваться как некорректный, даже если он в настоящее время содержит корректное значение при отправке.