Техники валидации форм — журнал «Доктайп»
Это перевод статьи Ире Адеринокун — «Form validation techniques».
Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.
Используем CSS
В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.
Используя :valid и :invalid, мы можем показать пользователю, правильно ли заполнено поле по мере ввода.
:valid и :invalidОднако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой.
Поля, обязательные для заполнения, сразу подсветятся нам как :invalid, а необязательные — как :valid. Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.
Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.
:valid и :requiredИспользуем JavaScript
JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.
Устанавливая атрибуты min, max и step, мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1, 12 и 123 в три поля и отправит форму:
В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.
Добавляем несколько сообщений об ошибках в один тултип
Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity, включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity-объект будет у поля, когда пользователь введёт в него 1:
Примечание переводчика: Слово «mismatch» переводится как «несоответствие».
Поэтому в значениях patternMismatch, stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.
По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity().
Теперь при попытке отправить форму мы увидим вот это:
Отображаем несколько ошибок в одном тултипеСтало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.
Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.
Показываем все ошибки для всех полей
Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM.
Таким образом, все ошибки будут выводиться рядом с соответствующим полем.
Этого можно добиться какой-то парой дополнительных строчек в нашем коде:
Вот что происходит при клике на submit теперь:
Отображаем все ошибки для всех полей в DOMИспользуем нестандартные проверки валидности
Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.
Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity, мы можем просто-напросто добавить туда ещё несколько проверок.
Валидация в реальном времени
Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении.
Можно выделить три правила для того, чтобы с формой было удобно работать:
- Требования для каждого поля чётко видны до того, как пользователь начал печатать.
- Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
- Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.
Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.
Простая валидация формы без JS / Хабр
В данной статье я бы хотел поделиться методом быстрой валидации полей с помощью разметки и стилей. Данный метод не является кроссбраузерным и рекомендуется к использованию только как дополнительная фича. По ходу статьи мы будем уменьшать наши шансы на кроссбраузерность, но повышать функциональность.
Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.
<form action="#"> <input type="text" name="name" placeholder="Имя" /> <input type="text" name="email" placeholder="E-Mail" /> <input type="text" name="phone" placeholder="Телефон" /> <input type="text" name="url" placeholder="Ваш сайт" /> <input type="text" name="growth" placeholder="Ваш рост" /> <button type="submit">Отправить</button> </form>
HTML5
Сейчас уже никого не удивить атрибутами валидации input полей, которое принес нам стандарт HTML5. Однако, обходить стороной мы его не станем — этот метод валидации является наиболее поддерживаемым в современных браузерах.
Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.
<form action="#"> <input type="text" name="name" placeholder="Имя" required /> <input type="email" name="email" placeholder="E-Mail" /> <input type="tel" name="phone" placeholder="Телефон" /> <input type="url" name="url" placeholder="Ваш сайт" /> <input type="number" name="growth" placeholder="Ваш рост" /> <button type="submit">Отправить</button> </form>
Применение этих двух атрибутов позволит гораздо эффективнее валидировать вводимую информацию нативными методами.
Отдельно хотелось бы сказать про тип поля tel. Ожидается что браузер будет валидировать телефонные номера, но нет, поле с типом tel используется сейчас только для автозаполнения. Дело в том, что валидация телефонных номеров очень неоднозначная задача из-за слишком большого количества различных форматов телефонных номеров в разных странах, которые просто никак не получится унифицировать и записать в одно правило.
Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:
<input type="tel" name="phone" placeholder="Телефон" pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" minlength="18" maxlength="18" />
Обычно я использую данный паттерн в связке с маской для ввода номера, но тут к сожалению без JS пока что не обойтись.
Если вы не используете маску, то я бы не стал использовать паттерны на вводе телефона, поскольку это в большинстве случаев вызовет больше неудобств для пользователя.
Поддержка браузерами атрибута pattern на данный момент очень хорошая. iOS начиная с версии 10.3 полностью поддерживает данное свойство, до этого наблюдалось отсутствие подсказок о неправильном вводе данных.
Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.
Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:
<input type="number" name="growth" placeholder="Ваш рост" min="100" max="250" />
С поддержкой этих атрибутов в браузерах, все хорошо.
Перейдем к стилизации!
CSS3
Для того чтобы кастомно стилизовать нашу валидацию, воспользуемся псевдоклассами :invalid и :valid.
Поддержка этих псевдоклассов в браузерах позволяет использовать их максимально широко на данный момент.
input:invalid {border-color: red;}
input:valid {border-color: green;}Казалось бы, берем полученные знания и применяем! Но не все так просто как кажется, давайте проверим как это работает. В результате мы получим, что все наши поля изначально пустые и обязательные будут считаться не валидными, а все остальные валидными. Совсем не красиво и непонятно для пользователя, что от него хотят.
Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:
input:invalid:not(:placeholder-shown) {border-color: red;}
input:valid:not(:placeholder-shown) {border-color: green;}
Если прочитать дословно: окрасить красным цветом границу инпута, когда наше поле не валидно и когда в нем не отображается значение атрибута placeholder.
<input type="text" placeholder=" " />
У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.
Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:
Итог
Таким образом, не прибегая к JS мы с помощью двух строк в CSS смогли стилизовать и валидировать форму. На текущий момент такая конструкция будет хорошо работать в большинстве браузеров, к сожалению, как всегда, веб-разработку подводят детища Microsoft.
html — CSS для ввода[type=»submit»]
спросил
Изменено 6 лет, 5 месяцев назад
Просмотрено 20 тысяч раз
Прежде чем я начну плакать, может кто-нибудь объяснить, почему ни одно из предпринятых CSS-решений для стилизации кнопки отправки не дает никакого эффекта? я пошел на размер шрифта: 50px , чтобы было очевидно, если я нажму на нужный элемент, чего я еще не сделал:
input[type="submit"].wysija-submit { радиус границы: 10px; граница: нет; тень блока: нет; семейство шрифтов: наследовать; размер шрифта: 50px!важно; } .wysija-отправить ввод [тип = "отправить"] { радиус границы: 10px; граница: нет; тень блока: нет; семейство шрифтов: наследовать; размер шрифта: 50px!важно; } .wysija-submit.wysija-submit-field input[type="submit"] { радиус границы: 10px; граница: нет; тень блока: нет; семейство шрифтов: наследовать; размер шрифта: 50px!важно; }
wysija-submit {
радиус границы: 10px;
граница: нет;
тень блока: нет;
семейство шрифтов: наследовать;
размер шрифта: 50px!важно;
}
.wysija-отправить ввод [тип = "отправить"] {
радиус границы: 10px;
граница: нет;
тень блока: нет;
семейство шрифтов: наследовать;
размер шрифта: 50px!важно;
}
.wysija-submit.wysija-submit-field input[type="submit"] {
радиус границы: 10px;
граница: нет;
тень блока: нет;
семейство шрифтов: наследовать;
размер шрифта: 50px!важно;
}
- HTML
- CSS
- ввод
- CSS-селекторы
2
Этот выполняет работу .
input[type="submit"].wysija-submit {
радиус границы: 10px;
граница: нет;
тень блока: нет;
семейство шрифтов: наследовать;
размер шрифта: 50px!важно;
} . и 
wysija-submit input[type="submit"] .wysija-submit.wysija-submit-field input[type=" submit"]
1
Символ пробела в CSS — это комбинатор потомков. Он говорит вашему компилятору CSS выбрать любого потомка предыдущего селектора.
Ваш текущий селектор пытается выбрать любой элемент с атрибутом класса класса , содержащим .wysija-submit.wysija-submit-field , затем он пытается найти элемент ввода , тип которого равен отправить внутри этого элемента. Это будет работать для следующей разметки:
<тип ввода = "отправить" />
Чтобы получить это, выберите элемент ввода , type is submit и , чей класс содержит wysija-submit
wysija-ja-mit.wysija-ja. поле input[type="submit"] { ... } Кому:
input[type="submit"].wysija-submit.wysija-submit-field { ... }
5
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Input:hover[type="submit"] - HTML и CSS - Форумы SitePoint
deotpit
1
Всем привет,
Это мой код:
<голова>тест <стиль> ввод: наведите [тип = "отправить"] { фон: красный; } <тело> <метод формы = "GET" действие = "test.php" >
Когда я запускаю его, я получаю скриншот №. 1, как показано на прикрепленном изображении. Когда я нажимаю «отправить», я получаю скриншот
№. 2, «отправить» красным цветом, точно так же, как этого требует приведенный выше код.
Когда я добавляю «отправить» стиль, тег ввода «отправить» выглядит следующим образом:
весь код выглядит так это:
<голова>тест <стиль> ввод: наведите [тип = "отправить"] { фон: красный; } <тело> <метод формы = "GET" действие = "test.
php" >
И новый дисплей выглядит как «3» на прикрепленном изображении.
Но!!!
Когда я наводил курсор на "отправить", цвет остается синим и не меняется на красный, несмотря на внутреннюю таблицу стилей, которая
работает нормально, пока стиль "фоновый цвет" не будет добавлен во встроенный стиль.
Мой вопрос:
Почему "ввод: наведение [type=“submit”]” не работает после добавления встроенного стиля “background-color”?
Спасибо
Гэндальф
2
Вы пробовали
input[type="submit"]:hover
В конце концов, именно ввод, а не наведение, имеет тип отправки.
СамА74
3
отделение:
Почему «input:hover[type=“submit”]» не работает после добавления встроенного стиля «background-color»?
Поскольку встроенный стиль переопределяет внешний CSS.
Только одна из многих причин, по которым не следует использовать встроенные стили.
Единственный способ победить это использовать !important в css, если вы настаиваете на том, чтобы код был ужасным.
Правильным способом было бы добавить синий фон в css.
3 лайка
деотпит
4
Гэндальф:
ввод [тип = «отправить»]: наведите курсор на
Спасибо gandalf458.
К сожалению, "input[type="submit"]:hover" также не меняет "background-color".
1 Нравится
деотпит
5
Спасибо, Сама74. Вы были полезны.
Я знаю, что «встроенный стиль переопределит внешний CSS», но я думал, что мы имеем дело с двумя разными селекторами…
Большое спасибо!
Гэндальф
6
отделение:
также не меняет «фоновый цвет»
Извините, мой плохой. Я рад, что Сэм пришел на помощь. Я все еще не выгляжу правильно!
ПолОБ
7
Гэндальф:
Извините, мой плохой. Я рад, что Сэм пришел на помощь. Я все еще не выгляжу правильно!
Да, я предпочитаю иметь :hover в конце, но я считаю, что спецификации говорят, что вы можете иметь селекторы атрибутов и псевдоклассы в любом порядке.
Простой селектор — это либо селектор типа, либо универсальный селектор, за которым сразу следует ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор соответствует, если совпадают все его компоненты.
отделение:
, но я думал, что мы имеем дело с двумя разными селекторами.
Селектор был тот же, но вы имели дело с «динамическими псевдоклассами», которые просто добавляли к правилу уровень специфичности.
Это означает, что встроенные правила стиля важнее специфики. (Обратите внимание, что вы вообще не можете применять «динамические псевдоклассы» через встроенные стили.)
6 лайков
деотпит
8
Спасибо!
Я заметил, что не могу добавить встроенный псевдокласс.
Еще раз спасибо.
Эрик_Дж
9
ПолOB:
Да, я предпочитаю иметь :hover в конце, но я считаю, что спецификации говорят, что вы можете иметь селекторы атрибутов и псевдоклассы в любом порядке.
