Проверка формы на JavaScript. Проверка заполнения формы с использованием JavaScript
В этой статье мы начнём разбираться с более сложными и функционально-законченными скриптами. Пройдём по шагам через все стадии - начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнём с проверки формы перед отсылкой на сервер.
Общие соображения и html-код формы
Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна - проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.
Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:
<
form action
=
"/cgi-bin/formmail.cgi"
onsubmit
=
"return sendform();"
>
Ваше имя
: *<
input type
=
"text"
name
=
"name"
><
br
>
Электронный адрес
: *<
input type
=
"text"
name
=
"email"
><
br
>
Тема сообщения
: <
input type
=
"text"
name
=
"subject"
><
br
>
Сообщение
: <
textarea name
=
"message"
><
br
><
br
>
<
input type
=
"submit"
value
=
"Отправить"
>
<
input type
=
"reset"
value
=
"Очистить"
>
* - необходимые для заполнения поля
Заметьте, что в отличие от обычной формы непосредственно в теге мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы sendform().
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onclick? Ответ простой - при использовании события onclick кнопку "submit" придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка javascript, мы не сможем отправить форму (!). Отслеживание же события onsubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.
Если Вы внимательно присмотритесь к html-коду нашей формы, то заметите, что рядом с этими полями я поставил звёздочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.
Функция проверки формы перед отправкой
А теперь перейдём к главному - к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от неё требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых - отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.
Для начала напишем общую обвязку функции:
<
script language
=
"javascript"
>
Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конкретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое - это проверить содержимое каждого из обязательных полей на отсутствие текста:
<
script language
=
"javascript"
>
Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
Сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Универсальная функция проверки
Если нам необходимо проверить всего два или три поля, то с таким методом проверки "по-одиночке" ещё можно смириться, но что, если их несколько десятков? А ведь такое не редкость - особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.
Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:
Required = new array("name", "email");
Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.
Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:
Required_show = new array("Ваше имя", "электронный адрес");
Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введён".
Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:
<
script language
=
"javascript"
>
В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом - введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.
Назад
«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.
Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.
Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.
На веб-странице неоднозначно просят ввести данные, поэтому пользователю приходится гадать и делать предположение, что же в действительности от него хотят. При этом не всегда происходит совпадение мнений разработчика и пользователя.
Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.
Следует понимать, что точные и правильные формулировки хотя и снижают вероятность возникновения ошибок, но никак не спасают от них. Только технические средства на стороне сервера позволяют получить требуемый результат и избежать ввода неправильной информации. Тем не менее, ревизия или, как её ещё называют, валидация на стороне клиента позволяет быстро проверить данные, вводимые пользователем, на корректность, без отправки формы на сервер. Таким образом экономится время пользователя и снижается нагрузка на сервер. С позиции юзабилити тоже имеются плюсы - пользователь сразу получает сообщение о том, какую информацию он указал неверно и может исправить свою ошибку.
Обязательное поле
Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required
, как показано в примере 1.
Пример 1. Атрибут required
HTML5
IE 10+
Cr
Op
Sa
Fx
Обязательное поле
Логин:
Пароль:
Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.
Рис. 1. Обязательное поле не заполнено
Корректность данных
Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.
Веб-адрес (
) должен содержать протокол (http://, https://, ftp://).
Адрес электронной почты (
) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.
У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.
В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.
Пример 2. Корректность данных
HTML5
IE 10+
Cr
Op
Sa
Fx
Корректность данных
Заполните форму (все поля обязательны)
Имя:
Email:
Сайт:
Opera проверяет элемент формы только при наличии атрибута name.
Что происходит в Opera при вводе неверных данных показано на рис. 2.
Рис. 2. Предупреждение о неправильных данных
Шаблон ввода
Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern
, а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.
В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.
Пример 3. Шаблон ввода
HTML5
IE 10+
Cr
Op
Sa
Fx
Ввод цвета
Введите шестнадцатеричное значение цвета
(должно начинаться с #)
На рис. 3 показано предупреждение в браузере Chrome.
Рис. 3. Введённые данные не соответствуют шаблону
Отмена валидации
Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate
тега
. В примере 4 показано использование этого атрибута.
Пример 4. Отмена валидации
HTML5
IE 10+
Cr
Op
Sa
Fx
Атрибут novalidate
Для аналогичной цели применяется и атрибут formnovalidate
, который добавляется к кнопке для отправки формы, в данном случае к тегу
. В этом случае форма из примера 4 будет иметь следующий вид.
Валидация полей с клиентской стороны - это то что должна иметь каждая форма, в этом нет сомнений. Во первых, пользователю не нужно ждать, тратить свои нервы. Во вторых, вы показываете, что беспокоитесь за своих посетителей. Посетителю очень приятно знать заранее, что он сделал не так.
В этом уроке, мы узнаем, как написать jquery валидацию форм в режиме реального времени. Если вы хотите увидеть, что у вас получиться, вы можете нажать «ДЕМО» и посмотреть.
Что мы сегодня узнаем?
Как мы реализуем jquery валидацию?
Существует множество способов достичь этого, вот самые распространенные из них:
Мы можем создать SPAN тег (в котором будет содержаться информация о валидации), рядышком с полем ввода, и дать ему определенный ID, через которого мы к нему обратимся.
Мы можем обвернуть каждое поле в P тег, внутри которого создать SPAN, который будет содержать информацию о валидации поля.
Также можно обвернуть поле P тегом, внутри которого «привыть» SPAN (на лету с помощью jquery).
Это все будет работать, но это не наилучший путь реализации. Почему? Потому, что слишком много лишнего HTML кода в форме ввода, который нам не нужен. Нужно соблюдать .
Мы сделаем это так, как я сделал для себя. На мой взгляд, это наиболее правильное решение, хотя никто так не делает. Честно говоря, я никого не видел, кто бы еще так делал… если знаете, напишите мне в комментарии в конце урока.
Что же мы будем делать?
Мы напишем простую форму, красивую и с чистым семантическим кодом, без лишних тегов.
Так как люди заполняют каждое поле в отдельности, мы можем отследить и валидировать его на лету:
Определить его позицию в окне (верхний левый угол)
Определить его ширину
Так мы будем знать, где находиться его окончание.
Добавим информацию о валидации в DIV блоке с определенным ID, справа от конкретного поля. Также присвоим соответственные классы.correct или.incorrect.
Заметьте:
это также приемлемо для людей не использующих JavaScript в своем браузере. Таковы будут валидированы на серверной стороне.
Структура проекта
Нам нужно будет создать три файла:
index.html
style.css
validate.js
Мы рассмотрим все поэтапно… сначала HTML код, потом необходимые CSS стили, позже мы сфокусируемся на основном - jQuery скрипте валидации формы.
Пишем HTML
Разложим все по полочкам…
Шаг 1 - создаем базовый HTML код
Для начала, создайте файл index.html и вставьте в него этот базовый код. Вы видите, что подключаем jQuery файл внизу, перед validation.js, который содержит наш скрипт валидации.
Шаг 2 - создаем форму, разделенную на три части
Мы создадим форму, состоящую из трех частей, чтобы увидеть как проводить валидацию разных полей ввода и чекеров. Для разделения мы используем FIELDSET и LABEL, для заголовков каждого раздела:
Персональная информация (имя пользователя, день рождения, пол, транспортное средство).
Email (поле ввода email пользователя).
О себе (краткая информация о пользователе).
Real-Time Form Validation Using jQuery
Personal Info
Email
About You
Шаг 3 - добавляем поля и кнопку подтвердить
Отлично, теперь создадим несколько полей ввода для нашей формы. Для нашего урока, мы специально отобрали несколько разных полей:
Три поля INPUT (имя пользователя, дата рождения, email адресс).
RADIO кнопки, для выбора пола.
CHECKBOX для транспортных средств пользователя.
TEXTAREA для информации о пользователе.
BUTTON для кнопки «Подтвердить».
Мы будем обвертывать каждый LABLE и поле ввода в тег P, чтобы разделить на отдельные блоки. Теперь ваш финальный файл index.html будет выглядеть следующим образом:
Real-Time Form Validation Using jQuery
Personal Info
Это может выглядеть немного страшновато, но это потому что много полей ввода в нашей форме. На самом деле, здесь нет ничего сложного. Сохраните ваш файл, и посмотрите в браузере, что получилось. Теперь немного украсим…
Добавляем CSS
Так как CSS стилизирование не основная тема сегодняшнего урока, мы не будем на этом останавливаться. Просто нам необходим этот CSS код, чтобы форма выглядела красиво и все блоки были на своих местах.
Создайте файл style.css, вставьте в него код ниже. Теперь форма с будущей jquery валидацией, выглядит потрясающе. Не так ли?
Это наиболее интересная и увлекательная часть урока. Но для начала, нам необходимо подумать и описать основные моменты нашей работы. Нужно все спланировать.
Планируем
Перед тем как будем писать, задайте себе три вопроса:
Что нам нужно от этого скрипта?
Как мы хотим это сделать?
Как мы этого добьемся?
Это понятно, мы хотим, чтобы скрипт проводил валидацию формы. Но как? Мы хотим, чтобы он делал это в режиме реального времени (когда пользователь завершит заполнение поля ввода) и при нажатии на кнопку «Подтвердить». Поэтому нам придется написать несколько функций: отдельно для каждого поля ввода и для всех форм (которая вызовется при нажатии кнопки «Подтвердить»).
Чтобы предотвратить повторение кода, нам нужно будет создать JavaScript объект для этого.
Что нам для этого нужно?
JS объект в нашем случае будет называться jVal
, он будет содержать следующие методы:
jVal.fullName
jVal.birthDate
jVal.gender
jVal.vehicle
jVal.email
jVal.about
Переменная, которая будет содержать статус текущей ошибки - jVal.errors. И метод, который проверяет, существуют ли какие-то ошибки и подтверждает отправку формы или отклоняет. Если нашлись какие-то ошибки, направляет пользователя в начало формы, где он может заполнить все поля корректно.
Метод называется - jVal.sendIt
Теперь, мы можем приступить к разработке jQuery скрипта валидации форм. Когда мы напишем первый метод, далее все пойдет проще и быстрее.
Начинаем работу
Основа кода проста, абсолютно весь jquery код будет содержаться внутри этого синтаксиса:
$(document).ready(function(){
jVal = {
};
});
Валидация поля имени пользователя
Наш первый метод будет обрабатывать поле «имя пользователя». Вставьте его внутрь jVal объекта, как показано на примере:
Var jVal = {
"fullName" : function() {
}
};
Теперь напишем несколько строк кода внутри метода. Просто вставьте их, далее мы рассмотрим что это значит:
$("body").append("");
var nameInfo = $("#nameInfo");
var ele = $("#fullname");
var pos = ele.offset();
Линия 1:
Мы добавляем DIV блок в документ. Class info, придает некий стиль для блока, который определен в файле style.css, также делает его невидимым с помощью display:none; Нащет ID, это для того, чтобы иметь быстрый доступ к этому блоку и манипулировать ним с помощью jQuery. Этот DIV блок будет содержать информацию о валидации поля.
Линия 3:
Пишем обращение к этому блоку в переменную, так как мы будем использовать его большое количество раз.
Линия 4:
Так же как и в предыдущем случае, мы записываем подключение к полю fullname в переменную. Мы также будем использовать его много раз.
jQuery функция offset() возвращает текущую позицию элемента по отношению к документу. Возвращается в виде объекта, который содержит свойства top и left. Мы используем эту функцию для ele, чтобы определить позицию поля ввода.
Как видите, мы начинаем оперировать со стилями блока nameInfo. Конкретно, мы устанавливаем его позицию справа от поля ввода. Для этого, мы подымаем на 3 пикселя вверх (2 строка кода), и двигаем на 15 пикселей справа от поля (3 строка кода).
Мы написали 50% первого метода, доведем дело до конца. Настало время определить, насколько корректно пользователь ввел данные и предпринять меры…
If(ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
Выглядит не очень? Бояться нечего…
Линия 1:
Проверяем, чтобы имя введенное пользователем не было менее 6 символов.
Линия 2:
Устанавливаем переменную jVal.errors на true, так как мы определили, что имя пользователя слишком короткое. Мы будем использовать это далее.
Линия 3:
Мы начинаем оперировать нашим nameInfo элементом (в котором выводим информацию). Для начала мы удаляем class correct, и присваиваем class error. Далее мы вставляем контент в nameInfo элемент, это информация о том, что имя должно быть длиннее 6 символов. И наконец то, мы делаем видимым наше сообщение для пользователя.
Линия 4:
Мы начинаем оперировать нашим ele элементом (форма ввода имени пользователя). Удаляем класс normal и присваиваем wrong.
Линия 5:
Если имя пользователя достаточно длинное, тогда…
Линия 6:
Мы начинаем оперировать nameInfo элементом. Если присвоен класс error, удаляем его и присваиваем класс correct. Вставляем внутрь «птичку», чтобы понять что все ОК. И показываем сообщение для пользователя.
Линия 7:
Оперируем ele элементом. Удаляем класс wrong, если он применен, и применяем класс normal.
Мы создали наш первый метод валидации! Пришло время протестировать его. Мы должны быть уверены, что наш метод вызовется, когда пользователь закончит вводить свое имя. Для реализации этого, нам необходимо прицепить событие к действию. Мы будем использовать функцию change(). Вставьте пример кода ниже, под jVal объектом:
$("#fullname").change(jVal.fullName);
Что это значит на человеческом языке: если пользователь изменяет значение поля «Full name» а потом заканчивает с этим, вызывается метод fullName, который проводит валидацию поля.
Теперь ваш файл validate.js должен содержать следующий код:
< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
};
// bind jVal.fullName function to "Full name" form field
$("#fullname").change(jVal.fullName);
});
Валидация поля даты рождения
Теперь все пойдет быстрее. Нам просто нужно сделать копию fullName метода и внести некоторые изменения.
Теперь, скопируйте fullName метод, вставьте его ниже и переименуйте в birthdate. И сделайте следующие изменения:
Всюду где встречается nameInfo, замените на birthInfo
Вместо #fullname, используйте #birthday для переменной ele
Сообщение к этому полю будет следующее: type in date in correct format
Вот как должен выглядеть birthdate метод, после внесения этих изменений:
"birthDate" : function (){
$("body").append("");
var birthInfo = $("#birthInfo");
var ele = $("#birthday");
var pos = ele.offset();
birthInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^{2}\-{2}\-{4}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
birthInfo.removeClass("correct").addClass("error").html("← type in date in correct format").show();
ele.removeClass("normal").addClass("wrong");
} else {
birthInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
С помощью регулярного выражения (14 строка), мы проверяем, чтобы дата была в формате 28-03-1987. В 16 строке, мы проверяем соответствие даты рождения пользователя с шаблоном регулярного выражения.
И конечно же, нам нужно прикрепить событие change() для поля даты рождения:
$("#birthday").change(jVal.birthDate);
Теперь мы имеем еще один работающий метод валидации формы на jQuery. Отличная работа!
Валидация поля стать
Опять скопируйте метод fullName, переименуйте его в gender и внесите следующие изменения:
Все nameInfo переименуйте в genderInfo
Вместо #fullname, примените #woman для переменной ele
В выражении genderInfo.css(), переменную top измените на top: pos.top-10, и left на left: pos.left+ele.width()+60
Наше выражение if() должно быть:
if($("input:checked").length === 0)
Сообщение пользователю будет: are you a man or a woman?
Вот как должен выглядеть метод gender, после изменений:
"gender" : function (){
$("body").append("");
var genderInfo = $("#genderInfo");
var ele = $("#woman");
var pos = ele.offset();
genderInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+60
});
if($("input:checked").length === 0) {
jVal.errors = true;
genderInfo.removeClass("correct").addClass("error").html("← are you a man or a woman?").show();
ele.removeClass("normal").addClass("wrong");
} else {
genderInfo..removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
В строке 14 мы проверяем сколько выбрано селекторов radio. Если 0, то пользователь ничего не выбрал, выводим сообщение об ошибке.
И как всегда, прикрепляем gender метод для radio кнопок:
$("input").change(jVal.gender);
Валидация checkers - владение транспортом
Теперь скопируем gender методи и переименуем его в vehicle, внесем следующие изменения:
Все genderInfo замените на vehicleInfo
Вместо #woman, впишите #ship для ele.
В vehicleInfo.css() выражении, значение left должно быть left: pos.left+ele.width()+40
