Валидация полей формы при отпускании клавиши. Простая валидация формы без JS
Эта очень неприятная тема для любого программиста. Чем больше полей в форме, тем больше и сложнее скрипт для валидации формы jquery . Были времена когда программисты делали валидацию на PHP. Подобная валидация довольно громоздко выглядела. Недостаток такой валидации PHP в том, что постоянно нужно использовать сессии или куки. В этом случае постоянно перегружается страница, что делает лишние запросы к базе данных.
Валидацию на jquery сделать намного проще. Существуют несколько плагинов jquery для проверки полей формы. Я покажу вам очень простой способ. Вы сможете его видоизменить и добавить свои фирменные проверки. Образно говоря, в один массив будут помещены ошибки. Затем этот массив превратится в сплошную строку. Вы увидите на выводе сразу несколько ошибок.
Вставьте следующий код в документ html. Обратите внимание на то, что у вас одна кнопка и 3 поля.
// validation form jquery $("input").click(function (){ // собираем данные в один массив var title = $("input").val().trim(); var text = $("input").val().trim(); var cat = $("input").val().trim(); //обрабатываю данные var error_arr = ; if(title.length == 0) error_arr.push("описание"); if(text.length == 0) error_arr.push("текст"); if(cat.length == 0) error_arr.push("категорию"); // проверка на наличие ошибок if(error_arr.length > 0){ alert("Вы не заполнили следующие поля:\n" + error_arr.join(", ")); // блокировка перехода на другую страницу return false; }else{ console.log("Ошибок нет!"); } });
Давайте рассмотрим сам скрипт для валидации формы. Сначала собираются данные в переменные. Обязательно сделайте очистку данных от пробелов. " " - это тоже символ. Далее происходит проверка данных на наличие символов. Вы можете добавить свои фирменные проверки. Даже можете использовать регулярные выражения. Всё зависит от поставленной задачи. Затем происходит финальная проверка на наличие ошибок. Если есть хотя бы одна ошибка, то алерт выведет ошибку. Обратите внимание на join(). Эта функция собирает все элементы массива и выводит их в виде строки через разделитель. Читайте о массивах на странице массивы в javascript . Я не использую циклы и функцию each(). Так проще)). Если ошибок нет, то скрипт переместит вас на новую страницу и данные отправятся. В случае ошибки валидации перехода на другую страницу не будет. Вы увидите предупреждение и вывод всех ошибок (Вы не заполнили следующие поля: описание, текст, категорию).
От автора: Когда вы собираете информацию от пользователей с помощью формы, использование хоть какой-то валидации данных является обязательным моментом. Если не обратить внимание на данный момент, то это может привести к потере покупателей, порче данных в базе данных (БД) и даже к появлению брешей в безопасности вашего веб-сайта. Так исторически сложилось, что валидация форм всегда вызывала головную боль. На стороне сервера это осуществить легче благодаря полноценным фреймворкам, которые сделают все за вас, но на стороне клиента это чаще всего заканчивается использованием JavaScript библиотек, которые отнимают немало усилий для их интеграции.
К счастью, HTML5 предоставляет несколько возможностей, которые способны решить большую часть вопросов, связанных с валидацией форм. Формы в HTML5 теперь имеют встроенную поддержку для валидации через использование специальных атрибутов и новых типов элемента input. А это также дает вам больше контроля над оформлением форм через CSS.
Посмотрите на онлайн-пример валидации формы и прочитайте небольшую шпаргалку по основам валидации форм в HTML5.
Специальные типы элемента Input
В HTML5 представлены несколько новых типов элемента input. Они могут быть использованы для создания полей ввода, которые будут принимать только определенный вид данных. Вот новые типы, которые появились в HTML5:
Чтобы использовать один из новых типов, укажите его название в качестве значения у атрибута type:
< input type = "email" / > |
Если браузер не поддерживает данный тип элемента input, то текущий элемент будет вести себя, как обычное текстовое поле ввода. Также, вам будет полезно узнать о том, что некоторые типы полей (например, «email» и «tel») приводят к открытию на мобильных устройствах специальных клавиатур с ограниченным набором клавиш, а не полной раскладки QWERTY. Более подробную информацию обо всех типах элемента input вы найдете на сайте MDN – .
Обязательные поля
Простое добавление атрибута «required» для элемента input, select или textarea сообщит браузеру о том, что у данного поля должно быть значение. Воспринимайте это, как красную звездочку*, которую мы видим в большинстве регистрационных форм.
< input type = "checkbox" name = "terms" required > |
Проблема здесь заключается в том, что практически любая информация будет удовлетворять данному требованию, т.е., например, вы можете пройти валидацию, просто поставив пробел (мы покажем вам, как этого избежать).
Когда вы указываете атрибут required для полей типа email или url, браузер ожидает наличия определенного шаблона, по которому он сможет проверить информацию, но подобная проверка очень снисходительна и пропускает e-mail адреса вроде «z@zz» (читайте далее, чтобы узнать, как с этим бороться).
Лимиты
Мы можем установить базовые ограничения, такие как максимальная длина или минимальное и максимальное значение для числовых полей. Чтобы ограничить длину элементов input или textarea, используйте атрибут «maxlength». Это делается для того, чтобы вообще нельзя было ввести строку длиннее, чем значение атрибута «maxlength». Если вы попробуете вставить строку, которая превышает лимит, то форма просто обрежет ее.
Оформление
CSS3 псевдо-классы позволяют нам оформить любое поле формы в зависимости от его состояния. Вот данные псевдо-классы:
Это означает, что обязательные поля у вас могут выглядеть одним образом, необязательные - другим и т.д. В нашем демо-примере мы скомбинировали селекторы «valid» и «invalid» с псевдо-классом «focus», чтобы раскрасить поля формы в красный и зеленый цвета, когда пользователь выбирает их и начинает в них что-нибудь вводить.
input:focus:invalid, textarea:focus:invalid{ border:solid 2px #F5192F; } input:focus:valid, textarea:focus:valid{ border:solid 2px #18E109; background-color:#fff; }
input : focus : invalid , textarea : focus : invalid { border : solid 2px #F5192F; input : focus : valid , textarea : focus : valid { border : solid 2px #18E109; background - color : #fff; |
Всплывающие подсказки
Вы наверняка замечали, что когда вы пытаетесь отправить неправильно заполненную форму, появляются всплывающие подсказки. Задав для наших полей атрибут «title» мы можем добавить дополнительные подсказки о том, каких значений наши правила валидации ожидают от пользователя.
Обратите внимание на то, что разные браузеры по-своему отображают всплывающие подсказки. В браузере Chrome значение атрибута title появится под основным текстом сообщения об ошибке и будет иметь меньший размер шрифта, чем текст об ошибке. Браузер Firefox вообще не будет отображать ваш текст для всплывающей подсказки до тех пор, пока вы не будете использовать атрибут «pattern», который будет использован для информации о шаблоне.
Вы также можете установить определенное требуемое значение. Вроде email или number.
Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:
- Сообщим пользователю о требуемом формате, когда фокус находится в поле ввода
- Напомним ему, если введенные данные не будут валидными
Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.
Проверяем заполнено поле или нет
Мы хотим провернуть фокус с :valid и :invalid , но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.
Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty ,но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент не содержит в себе ничего. Поля ввода и так пусты по умолчанию.
Трюк в том, чтобы проверить поле на видимость атрибута placeholder :
CSSinput:not(:placeholder-shown) { }
Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:
:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.
IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @supports , но…
CSS /* Это не сработает */@supports (input:placeholder-shown) {
input:not(:placeholder-shown) {
}
}
Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).
Проверить плейсхолдер при помощи JavaScript довольно легко:
JavaScript var i = document.createElement(‘input’);if (‘placeholder’ in i) { }
Но это не кажется самым простым способом имитации :placeholder-shown . Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.
Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…
SCSS form { > div { > input,
> input,
> input {
// Когда поле ввода…
// 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;
}
}
}
// ~
//