Проверка формы на JavaScript. Защита от дурака

Те, кто занимается созданием сайтов, в какой-то момент сталкиваются с необходимостью проверки заполнения пользователем полей формы, размещённой на сайте. Для этого создаётся какой-то вариант проверки пустых полей, который используется в своих проектах. Но для каждого случая количество полей, которые необходимо проверить, может быть разным. Это приводит к тому, что созданный вариант проверки необходимо изменять в зависимости от конкретных условий, и в дальнейшем у нас появляется уже несколько его модификаций.

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

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

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

Суть этого способа:

В html-разметке для обязательных полей добавляется data-атрибут, который является маркером обязательности.

Проверка выполняется только для тех полей, у которых присутствует данный атрибут.

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

Пример разметки формы:

Заголовок формы #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;i0) title=$(handle).attr("title"); var after = handle;//куда лепить сообщение об ошибке var attribute = $(handle).attr("cFM_check");//значение великого атрибута cFM_check //а не задали ли какую хитрую функцию для проверки поля? if(typeof $(handle).attr("cFM_function") !== "undefined") var chkFunk=$(handle).attr("cFM_function"); //наконец, проверяем поле if(typeof chkFunk !== "undefined") error=window($(handle)); else error=cFM_checkFullness(handle); //коль ошибка закралась к нам if(error!==true) { //определяем, куда лепим сообщение об ошибке if(typeof $(handle).attr("cFM_confirmInfo") !== "undefined") { after=$(handle).attr("cFM_confirmInfo"); if(after.indexOf("self")===0)//если вдруг селфы непойми зачем прилепили after=after.substr(4); } if(error==="wrong")//коль поле заполнено неправильно $(after).after("

Неверное значение поля

"); else{ if(error===false)//коль не заполнено вообще $(after).after("

Укажите "+title+"

");//html ошибки else//если особая проверка с особой html $(after).after(""); } $(handle).addClass(cFM_classError);//добавление класса ошибки if($(handle).attr("type")=="radio")//дорабатываем радиокнопки $("").addClass(cFM_classError); error=false; } return error; } function cFM_checkFullness(handle)//а это стандартная функция проверки { var error = true; //считываем данные с атрибутов var attribute = $(handle).attr("cFM_check"); //флаг обязательности var required = true; if(attribute.indexOf("Y")===-1) required=false; //проверка на формат var format=attribute; if(required) format=attribute.substr(2); switch($(handle).attr("type"))//смотрим, что же у нас за элемент такой { case "checkbox": if(!$(handle).prop("checked")) error=false; break; case "radio"://обещанная проблема с radio if(!$(handle).prop("checked") && $(":checked").length==0) error=false; else error=true; break; //и text, и select, и textarea здесь идентичны default: if(($(handle).val().trim().length==0 || $(handle).val()=="0") && required) error=false; else { if(format==="num")//проверка на число { var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val())) error="wrong"; } if(format==="email")//проверка на е-мейл { var regCheck = new RegExp("^(+[-._+&])*+@([-0-9a-zA-Z]+[.])+{2,6}$"); if(!regCheck.test($(handle).val())) error="wrong"; } } break; } return error; }

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

А функция проверки будет выглядеть, например, так: function checkName(handle) { var handleValue=handle.val().trim(); //как показывает практика, пользователи чем только не отделяют свое имя от фамилии if(handleValue.indexOf(" ")!==-1 || handleValue.indexOf(",")!==-1 || handleValue.indexOf(".")!==-1) return true; else return false; } Ну и стиль надо бы какой-нибудь нашей проверке задать: div.cFM_wrong { color:red; font-size:10px; position:absolute; width:140px; } input.cFM_wrong{ background: #ffd9d9; border-color:#d3adad; } Скрипт валидации формы.

Теперь в случае успешного выполнения функции cFM_checkFullness() (то есть возвращения true) скрипт должен отсылать форму на обработку. Как это реализовать - зависит уже от конкретной формы. Если подтверждение на отправку идет через кнопку submit - то можно подписаться на событие отправки формы (onsubmit) и в зависимости от результата проверки отсылать ее или нет. Например, так:

а тут типа куча тегов формы Если же отправка идет с помощью ajax"а - то тут вообще все просто: вызывать его в зависимости от результата работы функции cFM_checktrueAttr($(this)); Дополнительные заморочки.

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

Что же мы имеем в итоге? Подключая пару файлов (.js и.css), получаем функционал проверки свойств, который можно со спокойной душой кидать на любые сайты, при условии подключенного jquery. Ведь куда приятнее иметь под рукой набор готовых инструментов, чем тратить кучу времени на их производство перед каждой однотипной задачей.

Подключение и примеры

Во-первых нам понадобится библиотека jquery. Скачать ее можно, например, с официального сайта .
Или же просто вставить в шапку (то, что внутри тега ) вашего сайта строку

Затем качаем (правой клавишей -> понравившийся пункт со словом «сохранить») отсюда файл с js-кодом и, если нужно, файл с css-стилями для ошибочных полей отсюда .
Добавляем в шапку и их тоже: Теперь нужно расставить атрибуты полям формы согласно , в зависимости от того, какую проверку вы хотите совершить.
Последний штрих - добавление тегу события onsubmit: «onsubmit="return cFM_checktrueAttr($(this));"».

Давайте теперь попробуем реализовать проверку такой простенькой формы.