От автора: только лишь на HTML атрибутах можно сделать несчетное множество различных валидаторов форм. CSS селекторы помогут вам упростить работу и сделать ее более понятной для пользователей. Однако, чтобы добиться действительного хорошего результата, придется немного попотеть с CSS!
Лейблы в качестве плейсхолдеров
Во-первых, всегда используйте тег <label for=»correct_input»>. Уже на данном этапе во многих формах страдает пользовательский опыт (UX). Плейсхолдеры представляют собой подсказки по правильному вводу данных. Например, плейсхолдер «Талса» (город в Оклахоме) в поле «Город».
Если форма маленькая и стандартная (типа формы входа или регистрации), можно было бы использовать плейсхолдеры, но лучше все-таки использовать настоящие лейблы. Возьмем форму…
|
1 2 3 4 5 6 7 8 9 10 |
<form action="#0" method="post"> <div> <input type="text" id="first_name" name="first_name"> <label for="first_name">First Name</label> </div> <!-- ... ---> </form> |
Тег div можно использовать для позиционирования и поместить лейбл прямо над формой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
form { max-width: 450px; // контекст позиционирования > div { position: relative; // Будет смотреться, как плейсхолдер > label { opacity: 0.3; position: absolute; top: 22px; left: 20px; } } } |
Вам не нужно будет хитрить с курсором мыши, все уже семантически прописано. Если кликнуть на лейбл, то инпут попадет в фокус. Если кликнуть на инпут, он и станет активным. Работает что так, что так. Трюк здесь заключается в том, что инпут необходимо расположить первым (так будет семантически правильно), чтобы при срабатывании фокусу прятать лейбл:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
form { /* ... */ > div { > input[type="text"], > input[type="email"], > input[type="password"] { &:focus { & + label { opacity: 0; } } } } } |
Как добавить обязательные поля
Возможно, самый простой способ создать валидатор формы это использовать атрибут required для обязательных полей. Лучше позволить браузеру ловить ошибки, быстрее него это никто не сделает!
|
1 |
<input required type="text" id="first_name" name="first_name"> |
Положительная индикация ввода верного значения
Сделайте так, чтобы пользователь понял, а правильно ли он ввел данные. В браузере это можно сделать через CSS селектор :valid:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
form { > input[type="text"], > input[type="email"], > input[type="password"] { // show success! &:valid { background: url(images/check.svg); background-size: 20px; background-repeat: no-repeat; background-position: 20px 20px; // continue to hide the label & + label { opacity: 0; } } } } } |
Селектор :valid в нашем примере показывает, что соблюдены обязательные условия по заполнению поля. Однако его также можно использовать для валидации типа вводимых данных.
Показывайте подсказки по типу вводимых данных
Можно сделать так, чтобы поле принимало только значение определенного типа, например, email или number. По ссылке можно посмотреть все типы.
|
1 |
<input type="email" id="email" name="email" required> |
Данное поле не просто обязательно для заполнения, в него еще можно ввести данные только в формате электронной почты. Для хорошего UX нам необходимо:
Говорить пользователю о требованиях к заполнению, когда поле попало в фокус
Напоминать пользователю о неправильно введенных данных
Ах да… не показывайте подсказки, если поле пусто. Как следствие, нельзя присваивать полю неверное состояние. Это лишь раздражает и негативно сказывается на ощущениях. Поэтому нам необходимо проверять поле на пустоту.
Небольшой фокус! Тест поля на пустоту
Мы хотим задействовать в валидаторе селекторы :valid и :invalid, но нам нельзя преждевременно присваивать пустому полю селектор :invalid.
Есть какой-либо селектор для проверки поля на пустоту? Не совсем! Вы могли сразу вспомнить про :empty, но он нам не подходит. Данный селектор используется для проверки контейнеров типа <p></p>. Инпуты же не являются контентосодержащими элементами. Фокус в том, что для пустого поля необходимо присваивать плейсхолдер:
|
1 2 3 |
input:not(:placeholder-shown) { } |
Мы почти не используем плейсхолдер в нашем демо, мы просто в значении поставили один пробел:
|
1 |
<input placeholder=" "> |
Тут нам очень помогает псевдокласс :placeholder-shown! Это секретный селектор для проверки поля на пустоту. Данный псевдокласс не поддерживается в IE и Firefox, что накладывает свои сложности на его применение. В таких случаях обычно спасает @supports, но…
|
1 2 3 4 5 |
/* Не сработает */ @supports (input:placeholder-shown) { input:not(:placeholder-shown) { } } |
Правило @supports нельзя применять к селекторам, только свойства/значения (например, @supports (display: flex)). В JS написать тест на наличие плейсхолдера не так уже и сложно:
|
1 2 3 4 |
var i = document.createElement('input'); if ('placeholder' in i) { } |
А вот простого теста для :placeholder-shown в ближайшее будущее не предвидится. Так что, может быть, лучше просто подождать широкой поддержки в браузерах и потом уже использовать данный селектор в больших проектах. Если бы поддержка была нормальная, то логика была бы следующая…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
form { > div { > input[type="text"], > input[type="email"], > input[type="password"] { // Когда поле... // 1. НЕ пусто // 2. НЕ в фокусе // 3. НЕвалидно &:invalid:not(:focus):not(:placeholder-shown) { // Показываем напоминание с подсветкой background: pink; & + label { opacity: 0; } } // Когда невалидное поле получило фокус (и не пусто) &:invalid:focus:not(:placeholder-shown) { // Показываем подробную инструкция по заполнению снизу. & ~ .requirements { max-height: 200px; padding: 0 30px 20px 50px; } } } // <input> ~ // <label> ~ // <div class="requirements"> .requirements { padding: 0 30px 0 50px; color: #999; max-height: 0; transition: 0.28s; overflow: hidden; color: red; font-style: italic; } } } |
Можно создать мощный валидатор
Я имею в виду не просто атрибуты required или type=»email» и т.д. На стороне клиента можно проверять такие показатели, как длина (например, минимальная длина пароля или максимальное количество знаков в поле описания). Можно даже использовать всю мощь регулярных выражений. К примеру, вам нужно, чтобы пароль удовлетворял условиям:
Минимум 6 символов
Минимум один большой символ
Минимум один маленький символ
Минимум одно число
Сделать это можно вот так:
|
1 |
<input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password" id="password" name="password" required placeholder=" "> |
Демо
Я не стал убирать :placeholder-shown, хоть он и плохо работает в IE и Firefox. Это же просто демо! Не стесняйтесь, покопайтесь в коде, найдите что-нибудь для себя.
Редакция: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
