Проверка заполнения формы jquery. Защита от дурака
весёлый усач 7 мая 2017 в 02:32 Проверка пустых полей формы: универсальный способ- HTML ,
- JavaScript
Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.
Кроме того, на одной странице сайта может размещаться несколько форм, у каждой из которых будет разное количество обязательных для заполнения полей. В результате код будет включать в себя несколько блоков с одинаковыми функциями, но разными условиями, что не всегда является правильным решением.
В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.js присутствовало несколько функций для проверки разных форм, что увеличивало объём кода и ухудшало его восприятие.
В какой-то момент было принято решение написать вариант универсального способа проверки пустых полей, который можно будет использовать для любой формы с любым количеством обязательных полей. Необходимыми условиями такого способа были определены простота и отсутствие громоздких конструкций. В результате был найден способ, который полностью меня устроил и простотой, и универсальностью.
Суть этого способа:
Пример разметки формы:
Заголовок формы #1 Обязательно для заполнения Обязательно для заполнения
Пример кода проверки полей:
$(".js-form-validate").submit(function () { var form = $(this); var field = ; form.find("input").each(function () { field.push("input"); var value = $(this).val(), line = $(this).closest(".some-form__line"); for(var i=0;i
Ваше имя
: *<
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(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.
Назад |