Создание привлекательной формы. Часть 2

Создание привлекательной формы

От автора: в предыдущем уроке мы с Вами создали форму для отзывов и, на мой неприхотливый взгляд, придали ей довольно симпатичное стилевое оформление. Но создание формы — это только начало. Поскольку наша форма имеет некоторое количество обязательных к заполнению полей, то неплохо было бы доверить клиенту (браузеру) проверку заполнения всех обязательных полей перед отправкой формы.

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

Итак, приступим к написанию клиентского скрипта.

скачать исходникискачать урок

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Прежде всего, создадим в нашем проекте каталог js, в котором будут находиться клиентские скрипты. Поместим в этот каталог библиотеку jQuery и создадим в ней файл form.js со следующим содержимым:

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

Если в форме всего несколько полей, то проверить заполнены ли обязательные, можно попросту обратившись к каждому конкретному полю. Но что делать, если полей в форме очень много? И очень много обязательных полей? В таком случае довольно трудоемким процессом будет проверка каждого конкретного поля в отдельности.

А что если наша форма предполагает изменение количества полей? В таком случае придется лезть в код скрипта и производить изменения и в нем.

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

В файле form.js создадим массив с именами обязательных полей:

Как Вы, вероятно, уже догадались, в дальнейшем при изменениях в форме нам достаточно будет изменить только содержимое этого массива. Если в форме появились дополнительные обязательные поля — мы их включим в этот массив, если количество полей уменьшилось — мы удалим ненужные элементы из массива… согласитесь — просто и удобно.

Теперь воспользуемся методом submit(), чтобы отследить событие отправки формы:

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

Давайте продумаем алгоритм действий. Мы можем создать переменную, скажем, с нулевым значением, которая будет своеобразным флагом заполненности обязательных полей. Далее в цикле мы проверим все обязательные поля на заполнение. Если при этом выяснится, что какое-то из этих полей было не заполнено, то мы просто изменим значение флага с нуля на, скажем, единицу. После окончания цикла достаточно проверить значение флага, если оно осталось нулевым — значит, все поля были заполнены и можно разрешать отправку формы, если же значение равно единице – значит, какое-то из полей было не заполнено, и мы запретим отправку формы.

Также, кроме флага заполнения полей, объявим еще флаг подтверждения, который будет проверять чекбокс формы.

Теперь организуем цикл по всем полям формы:

Но все поля формы нам и не нужны, нам нужны только те из них, которые присутствуют в массиве fields. Поэтому при проверке каждого конкретного поля формы проверим нет ли его в массиве обязательных полей. Сделать это можно в цикле for:

Здесь мы сравниваем атрибут name проверяемого поля с каждым из элементов массива fields. Если совпадение будет найдено — значит, мы работаем с обязательным полем. А коль это поле обязательно к заполнению, то давайте возьмем значение этого поля и проверим его. Если значение вернет ИСТИНУ — значит, в поле что-то есть, иначе — поле пусто. При этом не забываем обрезать концевые пробелы, поскольку пробелы — это также символы, но просто пробелы нам не нужны:

Таким образом, если последнее условие не выполняется — значит, поле не заполнено. Что же делать в этом случае? Мы уже это решили для себя — изменяем значение флага error. Также нужно будет как-то выделить незаполненное поле из списка других, поэтому, кроме изменения флага, также добавим текущему полю класс, который затем опишем в стилях:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Здесь также мы добавили блок else, который будет выполняться в том случае, если поле заполнено. В этом блоке кода мы попросту удаляем возможный для поля класс formError, для того, чтобы убрать подсветку поля, если она была до этого.

В файл стилей добавим правило для класса formError:

C проверкой обязательных полей мы закончили. Сейчас можете после цикла each указать запрет отправки формы:

и насладиться промежуточным результатом. Если обязательные поля не заполнены — они будут подсвечены красной рамкой:

У нас есть еще одно своеобразное отдельное проверяемое поле — это чекбокс. Для него мы даже выделили отдельный флаг. После проверки обязательных полей давайте получим значение чекбокса:

Теперь в переменной check будет значение TRUE (если чекбокс был отмечен) либо FALSE (если не был отмечен).

Исходя из двух возможных значений, напишем условие:

Если чекбокс не отмечен, мы должны будем обратиться к описанию чекбокса (поясняющий текст, который является следующим элементом после чекбокса) и выделить его, к примеру, красным цветом. Также нам необходимо изменить значение флага. Если же чекбокс отмечен, то мы просто сбросим возможное выделение красным цветом:

В файле стилей добавим приоритетности правилу formTextRed:

Собственно, наш скрипт практически готов. Осталось проверить не изменилось ли значения флагов. Если не изменились — вернем ИСТИНУ для метода submit(), т.е. разрешим отправку формы, иначе — вернем ЛОЖЬ, отменяя отправку:

В блоке кода else в переменную err_text мы складываем сообщения об ошибках. Эти сообщения будут выводиться в элементе с идентификатором messenger, поэтому давайте создадим блок с таким идентификатором на странице, например, сразу под формой:

И опишем стилевые правила для этого элемента:

Вот и все. Теперь мы можем протестировать работу скрипта. Если мы не заполним обязательные поля и не подтвердим согласие на публикацию — форма отправляться не будет:

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

Ну а на этом у меня все. Удачи Вам и до новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

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