От автора: в предыдущем уроке мы с Вами создали форму для отзывов и, на мой неприхотливый взгляд, придали ей довольно симпатичное стилевое оформление. Но создание формы — это только начало. Поскольку наша форма имеет некоторое количество обязательных к заполнению полей, то неплохо было бы доверить клиенту (браузеру) проверку заполнения всех обязательных полей перед отправкой формы.
Этот шаг, конечно же, никоим образом не избавляет нас от необходимости проверки формы на сервере, но практически всегда гарантирует заполненность всех полей, тем самым помогая избежать лишнего трафика и снижая нагрузку на сервер.
Итак, приступим к написанию клиентского скрипта.
Прежде всего, создадим в нашем проекте каталог js, в котором будут находиться клиентские скрипты. Поместим в этот каталог библиотеку jQuery и создадим в ней файл form.js со следующим содержимым:
|
1 2 3 |
$(document).ready(function(){ } |
В файле form.js, собственно, и будет находиться наш скрипт, проверяющий заполнение формы. Оба скрипта подключим к файлу с формой:
|
1 2 |
<script src="js/jquery.js"></script> <script src="js/form.js"></script> |
Если в форме всего несколько полей, то проверить заполнены ли обязательные, можно попросту обратившись к каждому конкретному полю. Но что делать, если полей в форме очень много? И очень много обязательных полей? В таком случае довольно трудоемким процессом будет проверка каждого конкретного поля в отдельности.
А что если наша форма предполагает изменение количества полей? В таком случае придется лезть в код скрипта и производить изменения и в нем.
Согласитесь, хотелось бы как-то автоматизировать эти процессы. Давайте попробуем написать такой скрипт, который бы позволял нам в считанные секунды изменять количество обязательных полей, практически не требуя изменения кода.
В файле form.js создадим массив с именами обязательных полей:
|
1 2 3 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; } |
Как Вы, вероятно, уже догадались, в дальнейшем при изменениях в форме нам достаточно будет изменить только содержимое этого массива. Если в форме появились дополнительные обязательные поля — мы их включим в этот массив, если количество полей уменьшилось — мы удалим ненужные элементы из массива… согласитесь — просто и удобно.
Теперь воспользуемся методом submit(), чтобы отследить событие отправки формы:
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; $(".form").submit(function(){ } } |
Поскольку мы хотим максимально автоматизировать процесс, то при событии submit мы должны будем взять все поля формы и проверить их перед отправкой. При этом мы должны учитывать заполненность только полей из массива fields.
Давайте продумаем алгоритм действий. Мы можем создать переменную, скажем, с нулевым значением, которая будет своеобразным флагом заполненности обязательных полей. Далее в цикле мы проверим все обязательные поля на заполнение. Если при этом выяснится, что какое-то из этих полей было не заполнено, то мы просто изменим значение флага с нуля на, скажем, единицу. После окончания цикла достаточно проверить значение флага, если оно осталось нулевым — значит, все поля были заполнены и можно разрешать отправку формы, если же значение равно единице – значит, какое-то из полей было не заполнено, и мы запретим отправку формы.
Также, кроме флага заполнения полей, объявим еще флаг подтверждения, который будет проверять чекбокс формы.
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; $(".form").submit(function(){ var error = 0; // флаг заполнения обязательных полей var errorCheck = 0; // флаг подтверждения } } |
Теперь организуем цикл по всем полям формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; $(".form").submit(function(){ var error = 0; // флаг заполнения обязательных полей var errorCheck = 0; // флаг подтверждения $(".form").find(":input").each(function(){ // проверяем каждое поле формы } } } |
Но все поля формы нам и не нужны, нам нужны только те из них, которые присутствуют в массиве fields. Поэтому при проверке каждого конкретного поля формы проверим нет ли его в массиве обязательных полей. Сделать это можно в цикле for:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; $(".form").submit(function(){ var error = 0; // флаг заполнения обязательных полей var errorCheck = 0; // флаг подтверждения $(".form").find(":input").each(function(){ // проверяем каждое поле формы for(var i = 0; i < fields.length; i++){ // проходимся в цикле по массиву обязательных полей if($(this).attr("name") == fields[i]){ // если проверяемое поле есть в списке обязательных } } } } } |
Здесь мы сравниваем атрибут name проверяемого поля с каждым из элементов массива fields. Если совпадение будет найдено — значит, мы работаем с обязательным полем. А коль это поле обязательно к заполнению, то давайте возьмем значение этого поля и проверим его. Если значение вернет ИСТИНУ — значит, в поле что-то есть, иначе — поле пусто. При этом не забываем обрезать концевые пробелы, поскольку пробелы — это также символы, но просто пробелы нам не нужны:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; $(".form").submit(function(){ var error = 0; // флаг заполнения обязательных полей var errorCheck = 0; // флаг подтверждения $(".form").find(":input").each(function(){ // проверяем каждое поле формы for(var i = 0; i < fields.length; i++){ // проходимся в цикле по массиву обязательных полей if($(this).attr("name") == fields[i]){ // если проверяемое поле есть в списке обязательных if(!$.trim( $(this).val() ) ){ // если поле не заполнено } } } } } } |
Таким образом, если последнее условие не выполняется — значит, поле не заполнено. Что же делать в этом случае? Мы уже это решили для себя — изменяем значение флага error. Также нужно будет как-то выделить незаполненное поле из списка других, поэтому, кроме изменения флага, также добавим текущему полю класс, который затем опишем в стилях:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(document).ready(function(){ var fields = ["lastname", "firstname", "email", "comment"]; $(".form").submit(function(){ var error = 0; // флаг заполнения обязательных полей var errorCheck = 0; // флаг подтверждения $(".form").find(":input").each(function(){ // проверяем каждое поле формы for(var i = 0; i < fields.length; i++){ // проходимся в цикле по массиву обязательных полей if($(this).attr("name") == fields[i]){ // если проверяемое поле есть в списке обязательных if(!$.trim( $(this).val() ) ){ // если поле не заполнено $(this).addClass("formError"); error = 1; }else{ // если заполнено - убираем красную рамку $(this).removeClass("formError"); } } } } } } |
Здесь также мы добавили блок else, который будет выполняться в том случае, если поле заполнено. В этом блоке кода мы попросту удаляем возможный для поля класс formError, для того, чтобы убрать подсветку поля, если она была до этого.
В файл стилей добавим правило для класса formError:
|
1 2 3 |
.formError{ border: 1px solid red !important; } |
C проверкой обязательных полей мы закончили. Сейчас можете после цикла each указать запрет отправки формы:
|
1 |
return false; |
и насладиться промежуточным результатом. Если обязательные поля не заполнены — они будут подсвечены красной рамкой:
У нас есть еще одно своеобразное отдельное проверяемое поле — это чекбокс. Для него мы даже выделили отдельный флаг. После проверки обязательных полей давайте получим значение чекбокса:
|
1 2 |
// получаем значение чекбокса var check = $("#confirm").prop("checked"); |
Теперь в переменной check будет значение TRUE (если чекбокс был отмечен) либо FALSE (если не был отмечен).
Исходя из двух возможных значений, напишем условие:
|
1 2 3 4 5 6 7 |
// получаем значение чекбокса var check = $("#confirm").prop("checked"); if(!check){ // если не отмечен }else{ // если отмечен } |
Если чекбокс не отмечен, мы должны будем обратиться к описанию чекбокса (поясняющий текст, который является следующим элементом после чекбокса) и выделить его, к примеру, красным цветом. Также нам необходимо изменить значение флага. Если же чекбокс отмечен, то мы просто сбросим возможное выделение красным цветом:
|
1 2 3 4 5 6 7 8 9 10 |
// получаем значение чекбокса var check = $("#confirm").prop("checked"); if(!check){ // если не отмечен $("#confirm").next().addClass("formTextRed"); errorCheck = 1; }else{ // если отмечен $("#confirm").next().removeClass("formTextRed"); } |
В файле стилей добавим приоритетности правилу formTextRed:
|
1 2 3 |
.formTextRed{ color: red !important; } |
Собственно, наш скрипт практически готов. Осталось проверить не изменилось ли значения флагов. Если не изменились — вернем ИСТИНУ для метода submit(), т.е. разрешим отправку формы, иначе — вернем ЛОЖЬ, отменяя отправку:
|
1 2 3 4 5 6 7 8 9 10 |
if(error == 0 && errorCheck == 0){ // если ошибок нет - отправляем данные return true; }else{ var err_text = ""; if(error) err_text += "<p>Не все обязательные поля заполнены! Заполните подсвеченные поля.</p>"; if(errorCheck) err_text += "<p>Вы не подтвердили согласие на публикацию!</p>"; $("#messenger").hide().fadeIn(500).html(err_text); return false; } |
В блоке кода else в переменную err_text мы складываем сообщения об ошибках. Эти сообщения будут выводиться в элементе с идентификатором messenger, поэтому давайте создадим блок с таким идентификатором на странице, например, сразу под формой:
|
1 |
<div id="messenger"></div> |
И опишем стилевые правила для этого элемента:
|
1 2 3 4 5 6 7 8 |
#messenger{ width: 550px; border: gray dashed 1px; padding: 5px; background: #FFEDED; color: #7F5354; display:none; } |
Вот и все. Теперь мы можем протестировать работу скрипта. Если мы не заполним обязательные поля и не подтвердим согласие на публикацию — форма отправляться не будет:
Если же все в порядке, то данные отправляются на сервер. В следующем уроке мы будем писать уже серверный скрипт, проверяющий корректность данных формы.
Ну а на этом у меня все. Удачи Вам и до новых встреч!
Комментарии (23)