Проверка поля форм html

Проверка ввода данных

Рассмотрим пример проверки правильности ввода данных через HTML, с подсветкой CSS, а затем дополнительно сделаем валидацию с помощью JavaScript.

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

Пример: для программ типа калькулятора нужно вводить числа, чтобы производить с ними различные вычисления и нужна проверка (валидация) на то, что пользователь ввёл числа, а не буквы или символы.

Для ввода данных служит элемент input, у него и будем проверять валидацию.

Валидация input через HTML происходит с помощью атрибута pattern.

Примеры атрибута «pattern»

Только русские слова

type=»text»
title=»Разрешено использовать только пробелы и русские буквы»
pattern=»^[А-Яа-яЁё\s]+$»
/>

Только латинские слова

type=»text»
title=»Разрешено использовать только пробелы и латинские буквы»
pattern=»^[a-zA-Z\s]+$»>

Только русские или латинские слова с пробелами, не менее 6 символов

type=»text»
title=»Разрешено использовать только пробелы и русские или латинские буквы, не менее 6″
pattern=»^[A-Za-zА-Яа-яЁё\s]»>

Введите телефон в формате: +7 (777) 777-77-77 (Россия)

type=»tel»
title=»Используйте формат: +7 (777) 777-77-77″
pattern=»[+]7\s[\(]\d[\)]\s\d[\-]\d[\-]\d»>

Атрибут required делает заполнение поля обязательным.

Атрибуты minlength, maxlength задаёт минимальное и (или) максимальное допустимое количество символов. Например minlength=»6″.

Пример валидации на HTML

Использование CSS при валидации

/* Верный ввод */
input:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод */
input:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе */
input:focus:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе */
input:focus:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid border-color: red;
color: red;
box-shadow: none;
>

Введите число ОТ 10 ДО 999

Введите что нибудь и щёлкните вне элемента INPUT.

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

Пустое поле подсвечивает красным цветом атрибут required который сигнализирует что поле обязательно для заполнения.

Атрибуты minlength=»2″ maxlength=»3″ следят за тем, чтобы было введено от двух до трёх символов. Один символ, подсветка останется красной. Больше трёх символов ввести не удаться.

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

Пример валидации на JavaScript

Проверка заполнения формы

JavaScript

function validateForm() var x = document.forms[«myForm»][«fname»].value;
if (x == «») alert(«Необходимо ввести имя»);
return false;
>
>

html

Пример

Проверка ввода чисел

JavaScript

function myFunction() var x;
var text = «Все в порядке»;

if (isNaN(x) || x 10) text = «Ввод не верен»;
>
document.getElementById(«demo»).innerHTML = text;
>

html

Пример

Необычный способ проверки валидности email.

JavaScript

function myFunction() const email = document.getElementById(«mail»);

email.addEventListener(«input», function (event) if (email.validity.typeMismatch) email.setCustomValidity(«Введите корректный email»);
> else email.setCustomValidity(«»);
>
>);

html

Пример

Остальные проверки валидации на JS

var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) printError(«nameErr», «Пожалуйста, введите правильное имя»);

var regex = /^6\d$/;
if(regex.test(mobile) === false) printError(«mobileErr», «Пожалуйста, введите действительный 10-значный номер мобильного телефона»);
>

Источник

Простая валидация формы без JS

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

Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.

HTML5

Сейчас уже никого не удивить атрибутами валидации input полей, которое принес нам стандарт HTML5. Однако, обходить стороной мы его не станем — этот метод валидации является наиболее поддерживаемым в современных браузерах.

Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.

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

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

Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:

\s[\(]\d[\)]\s\d[\-]\d[\-]\d" minlength="18" maxlength="18" /> 

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

Поддержка браузерами атрибута pattern на данный момент очень хорошая. iOS начиная с версии 10.3 полностью поддерживает данное свойство, до этого наблюдалось отсутствие подсказок о неправильном вводе данных.

Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.

Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:

С поддержкой этих атрибутов в браузерах, все хорошо.

CSS3

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

Казалось бы, берем полученные знания и применяем! Но не все так просто как кажется, давайте проверим как это работает. В результате мы получим, что все наши поля изначально пустые и обязательные будут считаться не валидными, а все остальные валидными. Совсем не красиво и непонятно для пользователя, что от него хотят.

Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:

input:invalid:not(:placeholder-shown) input:valid:not(:placeholder-shown)

Если прочитать дословно: окрасить красным цветом границу инпута, когда наше поле не валидно и когда в нем не отображается значение атрибута placeholder. Если ваше поле не имеет атрибута placeholder, можно просто поставить внутри пробел:

У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.

Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:

Итог

Таким образом, не прибегая к JS мы с помощью двух строк в CSS смогли стилизовать и валидировать форму. На текущий момент такая конструкция будет хорошо работать в большинстве браузеров, к сожалению, как всегда, веб-разработку подводят детища Microsoft.

Источник