Помогите пользователям ввести правильные данные в формы

Браузеры имеют встроенные функции проверки, позволяющие убедиться, что пользователи ввели данные в правильном формате. Вы можете активировать эти функции, используя правильные элементы и атрибуты. Кроме того, вы можете улучшить проверку формы с помощью CSS и JavaScript.

Почему вам следует проверять свои формы?

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

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

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

Помогите пользователям избежать случайного пропуска обязательных полей

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

Попробуйте отправить эту форму без ввода каких-либо данных. Видите ли вы сообщение об ошибке, прикрепленное к <input> , сообщающее, что это поле является обязательным?

Это происходит из-за required атрибута.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

Вы уже узнали, что можно использовать гораздо больше типов, например type="email" . Давайте посмотрим на необходимый адрес электронной почты <input> .

Попробуйте отправить эту форму без ввода каких-либо данных. Есть ли разница с предыдущей демкой? Теперь введите свое имя в поле электронной почты и попробуйте отправить. Вы увидите другое сообщение об ошибке. Как это возможно? Вы получаете другое сообщение, поскольку введенное вами значение не является действительным адресом электронной почты.

Атрибут required сообщает браузеру, что поле является обязательным. Браузер также проверяет, соответствуют ли введенные данные формату type . Поле электронной почты, показанное в примере, действительно только в том случае, если оно не пусто и если введенные данные являются действительным адресом электронной почты.

Помогите пользователю ввести правильный формат

Вы узнали, как сделать поле обязательным. Как бы вы указали браузеру, что пользователь должен ввести не менее восьми символов в поле формы?

Попробуйте демо-версию. После внесения изменений вы не сможете отправить форму, если введете менее восьми символов.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

Сообщите свои правила проверки

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

Убедитесь, что все пользователи понимают ваши правила проверки. Для этого соедините элемент управления формы с элементом, объясняющим правила. Для этого добавьте атрибут aria-describedby к элементу с id формы.

Атрибут шаблона

Иногда вам нужно определить более сложные правила проверки. Опять же, вы можете использовать атрибут HTML. Это называется pattern , и в качестве значения вы можете определить регулярное выражение .

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

Здесь разрешены только строчные буквы; пользователю необходимо ввести не менее двух символов и не более двадцати.

Как бы вы изменили pattern , чтобы разрешить использование заглавных букв? Попробуйте .

Добавить стили

Теперь вы узнали, как добавить проверку в HTML. Было бы здорово, если бы вы могли также стилизовать элементы управления формы на основе статуса проверки, не правда ли? Это возможно с помощью CSS.

Как оформить обязательное поле формы

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

Вы можете стилизовать required поля с помощью псевдокласса CSS :required .

input:required {
  border: 2px solid;
}

Недопустимый стиль элементов управления формы

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

Вы можете использовать псевдокласс :invalid для добавления стилей к недопустимым элементам управления формы. Кроме того, существует псевдокласс :valid для стилизации допустимых элементов формы.

Есть больше способов адаптировать стили на основе проверки. В модуле CSS вы узнаете больше о стилизации форм.

Проверка с помощью JavaScript

Для дальнейшего улучшения проверки ваших форм вы можете использовать API проверки ограничений JavaScript .

Предоставляйте содержательные сообщения об ошибках

Ранее вы узнали, что сообщения об ошибках не одинаковы в каждом браузере. Как вы можете показать одно и то же сообщение всем?

Для этого используйте метод setCustomValidity() API проверки ограничений. Давайте посмотрим, как это работает.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

Запросите элемент, в котором вы хотите установить пользовательское сообщение об ошибке. Прослушайте invalid событие определенного вами элемента. Там вы устанавливаете сообщение с помощью setCustomValidity() . В этом примере показано сообщение Please enter your name. если ввод недействителен.

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

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

Как проверять в режиме реального времени Вы можете добавить проверку в реальном времени в JavaScript, прослушивая событие onblur элемента управления формой, и проверять ввод сразу же, когда пользователь покидает поле формы.

Нажмите на поле формы в демо-версии , введите «web» и щелкните в другом месте страницы. Под полем формы вы увидите собственное сообщение об ошибке для minlength .

Узнайте больше о реализации проверки в реальном времени с помощью JavaScript в следующем модуле.

Проверьте свое понимание

Проверьте свои знания о проверке форм

Ресурсы

• Отключите кнопку оплаты после отправки формы
• Добавьте CSS, чтобы форма работала лучше