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

Узнайте, как проверять формы на фронтенде.

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

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

Зачем нужна валидация форм?

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

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

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

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

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

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

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

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

В разных браузерах используется разный текст сообщений об ошибках. Формулировка также зависит от языка браузера пользователя. Если вы используете Safari и ваш предпочтительный язык браузера - немецкий, то вы получите другое сообщение об ошибке, чем пользователь Chrome, для которого выбран английский язык браузера.

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

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

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

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

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

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

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

Показать ответ

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

Имя атрибута - minlength. Установите значение 8, и вы получите желаемое правило валидации. Если требуется обратное, используйте maxlength.

Для числовых типов ввода используйте min и max, чтобы добиться того же результата.

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

<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, чтобы он допускал и прописные буквы? Try it out.

Показать ответ

Правильный ответ - pattern="[a-zA-Z]{2,20}".

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

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

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

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

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

input:required {
    border: 2px solid;
}

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

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

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

Иногда дизайнеры выделяют состояние invalid красным цветом, используя псевдокласс :invalid. Однако для передачи информации об ошибке или успехе никогда не следует полагаться только на цвет. Для людей с красно-зеленым дальтонизмом зеленая и красная границы выглядят практически одинаково. Они не смогут понять, произошла ли ошибка или успех. Добавьте текст или значок, чтобы сделать это очевидным.

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

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

Подробнее о :user-invalid.

Валидация с помощью 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 и повторить попытку. Вы снова увидите стандартные сообщения об ошибках.

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

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

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

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

Ресурсы

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

Источник — Help users enter the right data in forms

Комментарии