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

В браузерах есть встроенные функции проверки, которые позволяют убедиться, что пользователи ввели данные в правильном формате. Чтобы активировать эти функции, используйте правильные элементы и атрибуты. Кроме того, вы можете улучшить проверку форм с помощью 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;
}

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

Помните, что происходит, если данные, введенные пользователем, недействительны? Появится сообщение об ошибке, связанное с элементом управления формой. Wouldn't it be great to adapt the appearance of the element when this happens?

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

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

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

Чтобы улучшить проверку форм, вы можете использовать JavaScript Constraint Validation API.

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

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

Для этого используйте метод setCustomValidity() Constraint Validation API. Вот как это работает.

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

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

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

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

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

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

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

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

Проверьте себя

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

Ресурсы

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