Валидация input html css

Содержание

:invalid , :valid
Кратко
Пример
Как понять
Как пишется
Подсказки
На практике
Денис Ежков советует
Валидация input
Валидация input с помощью HTML
Валидация input с помощью JavaScript
Стилизация верного и неверного поля ввода.
Статьи из данной категории:
Комментарии ( 5 )

:invalid , :valid

Валидируем форму прямо в браузере. Без JavaScript, регистрации и смс.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Псевдоклассы используются для стилизации полей формы, филдсетов, либо самой формы:

Пример

Скопировать ссылку «Пример» Скопировано

    Имя:  E-mail:    Я согласен с политикой обработки персональных данных       form> div class="form-row"> label for="first-name">Имя:label> input type="text" name="first-name" id="first-name" required> span class="validity-icon">span> div> div class="form-row"> label for="email">E-mail:label> input type="email" name="email" id="email"> span class="validity-icon">span> div> div class="form-row"> label> input type="checkbox" name="agree" id="agree" required> Я согласен с политикой обработки персональных данных label> div> div class="form-row"> button type="submit">Отправитьbutton> div> form>

 input:invalid  border: 2px solid red;> input:invalid + .validity-icon::before  content: '✖'; color: red;> input:valid + .validity-icon::before  content: '✓'; color: green;> [type="checkbox"]:invalid  outline: 2px solid red; outline-offset: 2px;> input:invalid  border: 2px solid red; > input:invalid + .validity-icon::before  content: '✖'; color: red; > input:valid + .validity-icon::before  content: '✓'; color: green; > [type="checkbox"]:invalid  outline: 2px solid red; outline-offset: 2px; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Часто на сайтах мы встречаем формы. Это могут быть формы регистрации или формы оплаты покупки в интернет-магазине. Некоторые поля ввода и другие элементы управления в этих формах могут иметь особые требования к заполнению. Например, какие-то поля ввода должны быть обязательно заполнены, какие-то — иметь определённый формат данных (к примеру, текст в поле с типом email должен содержать знак @ ).

Чтобы показать что поле ввода заполнено корректно к нему можно применить особые стили используя псевдокласс :valid . Аналогично, для некорректно заполненного поля мы можем применить особые стили используя псевдокласс :invalid .

В примере выше можно увидеть пару моментов:

Поле ввода имени и чекбокс обязательны к заполнению, но не заполнены, поэтому псевдокласс :invalid применяется к ним сразу же.
Поле ввода электронной почты необязательно к заполнению, поэтому к нему сразу же применён псевдокласс :valid .

Но если ввести в поле хотя бы один символ, браузер запускает проверку на корректность ввода email (из-за того, что мы указали type = «email» ) и применяет псевдокласс :invalid до тех пор, пока не будет введён корректный адрес электронной почты.

Также указанные псевдоклассы применяются и к самой форме, в которой находится инпут.

В примере выше можно увидеть, что при наличии филдсета к нему также будет применён соответствующий псевдокласс.

 form:invalid  border-color: red;> form:valid  border-color: green;> fieldset:invalid  border-color: red;> fieldset:valid  border-color: green;> form:invalid  border-color: red; > form:valid  border-color: green; > fieldset:invalid  border-color: red; > fieldset:valid  border-color: green; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Например, так выглядит селектор по классу:

 .element:invalid  color: red;> .element:valid  color: green;> .element:invalid  color: red; > .element:valid  color: green; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Если в форме есть группа связанных радиокнопок ( ), то если хотя бы у одной есть атрибут required , псевдокласс :invalid будет применён ко всем радиокнопкам сразу.

💡 Псевдоклассы :invalid или :valid применяются и к самой форме, и к тегу , в зависимости от того, есть ли внутри ошибки, или все инпуты заполнены верно.

💡 В отличие от комплексной валидации формы, которая происходит при попытке её отправить, эти псевдоклассы работают в реальном времени и сохраняют свою актуальность даже во время ввода.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 В настоящий момент стили для псевдокласса :invalid применяются к невалидному полю сразу же, что не всегда удобно. Было бы круто, если бы валидация включалась, только если пользователь начал что-то вводить, но, к сожалению, пока нет такой возможности «из коробки».

В будущих версиях спецификации CSS должен появиться псевдокласс :user — invalid , который задуман как раз для целей, описанных выше. То есть он будет применяться, например, к полю ввода только после того, как пользователь начал там что-то писать.

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

    Имя:  type="text" name="first-name" placeholder="Например, Пётр" required>   E-mail:  type="email" name="email" placeholder="Например, mymail@gmail.com" >      form> div class="form-row"> label for="first-name">Имя:label> input type="text" name="first-name" id="first-name" placeholder="Например, Пётр" required> span class="validity-icon">span> div> div class="form-row"> label for="email">E-mail:label> input type="email" name="email" id="email" placeholder="Например, mymail@gmail.com" > span class="validity-icon">span> div> div class="form-row"> button type="submit">Отправитьbutton> div> form>

 input:invalid  border: 2px solid red;> input:invalid:placeholder-shown  border-color: black;> input:invalid:placeholder-shown + .validity-icon::before,input:valid:placeholder-shown + .validity-icon::before  visibility: hidden;> input:invalid  border: 2px solid red; > input:invalid:placeholder-shown  border-color: black; > input:invalid:placeholder-shown + .validity-icon::before, input:valid:placeholder-shown + .validity-icon::before  visibility: hidden; >

Источник

Валидация input

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода.

Валидация input с помощью HTML

Для этой задачи воспользуемся атрибутом pattern . При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title ).

 Введите число
 Введите число от 1 до 9
 Введите не более 5 цифр
 "> Введите от 7 до 9 цифр
 "> Только русские слова
  Только латинские слова
 Только русские или латинские слова с пробелами, не менее 6 символов
 ">

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

Для составления более сложных паттернов необходимо хорошо знать регулярные выражения.

Более сложный пример: валидация номера телефона.

 Введите телефон в формате: +7 (777) 777-77-77 (Россия)
 [\)]\s\d[\-]\d[\-]\d" title="Используйте формат: +7 (777) 777-77-77" /> Введите телефон в формате: +375 (33) 333-33-33 (Беларусь)

Валидация input с помощью JavaScript

Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода

Разрешим ввод только цифр:

document.querySelector(".myValidate").addEventListener("keyup", function()< this.value = this.value.replace(/[^\d]/g, ""); >);

Первый аргумент метода replace() — это регулярное выражение (шаблон, по которому будем делать проверку), второй — пустая строка » «.
Т.е. при соответствии заданного шаблона мы очищаем недопустимые символы.

d — только цифры;
^ — инверсия, т.е. получается ^d — не цифры;
/g — флаг глобальный поиск.

Т.о., пользователь не сможет ввести отличный от цифр символ.

Пример. Введите любое число:

Используя регулярные выражения можно задать абсолютно любой шаблон для input.

Стилизация верного и неверного поля ввода.

В основном комбинированием каких-то из этих трёх свойств мы оповещаем пользователя о возможности дальнейшей отправки формы.

Верный ввод при фокусе обязательного input:

НЕверный ввод при фокусе обязательного input

input:focus:required:invalid

Достаточно гибко можно стилизовать поля для ввода с помощью CSS.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 5 )

Спасибо! Интересная статья. А не могли бы вы добавить как сделать маску при клике на поле, чтоб человек не делал пробелы и скобки, а просто вводил цифры номера телефона. Например: +7(___) ___-__-__ где вместо _ просто будут появляться введённые цифры.

Хорошая статья. А вот допустим такая задача, как проверить input на валидность при запрете вводить один ноль. То есть. условие для поиска type=»number» от 10 до 15 знаков. Все работает, кроме одного глюка. Поиск срабатывает если введен 0. А это неправильно, надо что бы условие поиска было строгим- «Количество чисел не меньше 10». Почему 0 проскакивает непонятно. Чем только не ограничивал-, pattern. min и тд. Ничего не поморгает, 0 все равно проходит. Подскажите в чем проблема. Как запретить ввод одного нуля? Заранее благодарен за помощь

Статья и правда хорошая, но есть недоработка. Пункт «Валидация input помощью JavaScript». Если ввести число, а потом любой символ — то удаляется вся строка. Чтобы этого избежать, стоит ставить input type text. Всё потому что number считает что символы в инпуте — пустая строка. А текст — нет.

Источник

Читайте также: Css div viewport height