Javascript проверка полей формы перед отправкой. Проверка формы на JavaScript
Все мы когда-нибудь заполняли формы. Кое-кто даже обрабатывал собранные ими результаты, будь то сделанные в интернет-магазине заказы, или обратка по сервису. Прося пользователя заполнить какую-либо информацию, мы хотим, чтобы она соответствовала определенному формату, особенно если в дальнешем она обрабатывается CMS вроде 1C bitrix, WorldPress, и так далее. Ведь если в графе телефон пользователь зачем-то запишет свой логин Skype, может возникнуть ошибка обработки данных: они не запишутся, и пользователя снова выбросит на страницу заполнения формы. Следовательно, возникает вопрос о том, как бы провести проверку введенных данных в режиме он-лайн и не допустить отправку некорректных данных.
Работу описываемого решения, разработанного нами, можно сразу оценить на примере процедуры оформления заказа на сайте компании "Ньюком" . А ниже начнем повествование о процессе его разработки, а так же приведем еще несколько примеров.
Постановка задачиСделать простенькую javascript-проверку полей формы перед ее отправкой на сервер – дело пары минут. Только вот когда эту простенькую пишешь десятый раз для одного только сайта, невольно задумаешься об автоматизации этого процесса. В какой-то момент мысли об этом стали столь навязчивы, что пришлось сесть и накатать миниатюрную библиотеку, разбирающуюся с полями.
Если разбить задачу на блоки, то получится примерно следующая схема:
Ну, если схема есть, то давайте уж ее реализуем.
Какие поля чаще всего встречаются в формах?
- Текстовые инпуты, которые, как правило, проверяются либо просто на заполненность, либо на несложные регулярные выражения вроде email-а или телефона.
- Чекбоксы, проверяемые на наличие отметки (вроде соглашения на обработку личных данных).
- Можно упомянуть и выпадающие списки, проверяемые на какое-нибудь непустое значение.
- Не стоит забывать и о коварных радиокнопках. Почему коварных? В проверке на отметку есть подводные камни.
Раз уж мы взялись писать более-менее универсальный скрипт, то нужно подумать и о извращенных
необычных конструкциях, которые в дальнейшем будут называться «группы». Под этим словом будем подразумевать связанные друг с другом поля. Например, если пользователь поставил флажок «Присылать на почту новости» - становится обязательным к заполнению пункт «e-mail», или телефон нередко любят разделять на код и сам номер – тогда корректность должна проверяться по всем полям, а некорректность одного влечет за собой ошибку в обоих. Да и сообщение об ошибки надо выводить не у всех полей групы, а только у одного, иначе от их количества начнет в глазах рябить.
Какой вывод можно сделать?
Надо организовать обычную проверку на текстовое поле, проверку на email и «цифровые» поля вроде телефона, возраста, итп. Чекбоксы и радиокнопки проверяем на свойство checked, выпадающие списки – по значению. Чтобы удовлетворить хитрые группы – написать обработчик и для них. Кроме того, обеспечить возможность проверки некоторых полей какой-нибудь пользовательской функцией для особо замороченных случаев.
На мой взгляд, вариантов хранения тут всего два:
JS-объект будет быстрее работать, да и смотреться куда корректнее, нежели какие-то нестандартные атрибуты в тегах. Скажем, выглядеть он будет так:
Var checkThis={ handle: "$("")",//указатель на проверяемое поле type: "email",//тип проверки: обычная, емейл, цифра title:"введите сюда емейл, например",//хинт об ошибке nesess: true,//флаг обязательности group: false,//указатель группы }; var AllChecks=;//а это - массив, где хранились бы все проверяемые объекты
Если программист добирается до сайта, когда он уже полностью сверстан (то есть действие происходит в фантастическом романе
) – такой подход прекрасен. Но зачастую что-то обязательно будет доделываться, в том числе могут дописываться дополнительные поля или создаваться новые формы, а оставлять добавление обработчиков полей на совесть верстальщиков, даже при наличии написанного конструктора, - значит обрекать себя на постоянные обращения с их стороны в стиле «а у меня тут все поломалось». И тогда о главном постулате задумки, автоматизации (ну, точнее, избавлении себя-любимого от ненужных телодвижений), придется забыть.
Тогда можно попробовать засовывать данные о проверке в нестандартные атрибуты, превращая лаконичное
в громоздкого монстра вроде Остановимся мы именно на этом варианте. Мы же за универсальность.Затем введем следующие обрабатываемые теги:
| title | Он, конечно, стандартный, но сюда мы запишем сообщение об ошибочном заполнении поля. И выводить будем в стиле «Укажите »+title |
| cfm_check | Флаг проверки, именно по нему мы и будем искать проверяемые поля. А значения он может принимать следующие:
|
| cfm_confirminfo | По умолчанию ошибки будут выводиться сразу после проверяемого элемента, что не всегда удобно. Так пусть же в этом атрибуте мы укажем jq-селектор на элемент, после которого выводить ошибку. Например, cfm_confirminfo=’#placeForErrors’ |
| cfm_function | Чтобы не усложнять перегруженный cfm_check, сюда мы запишем название нестандартной функции-проверки поля |
Информацию мы получили, осталось лишь ее обработать. Алгоритм здесь не замороченный:
- на вход подаем указатель на форму, в которой делать проверку (у нас же много форм может быть на странице!);
- пробегаем по указанным элементам формы, проверяя корректность заполнения;
- если ошибки есть – маркеруем их, если нет – разрешаем проверку формы.
Наверное, уже пора выдать js-код, реализующий функционал хотя бы частично, раз уж отписана такая куча текста?
If(typeof cFM_classError === "undefined")//сюда запишем css-класс, приписывающийся неправильным полям var cFM_classError="cFM_wrong"; function cFM_checktrueAttr(parent)//подготавливает данные к обработке //(parent – jq-указатель на форму, или объединяющий блок) { var error=true; //подчищаем за вызванной ранее функцией $("div."+cFM_classError).remove();//убираем подсказки $("."+cFM_classError).each(function(){//убираем подсветку ошибок $(this).removeClass(cFM_classError); }); //ищем поля для проверки var inputsToHandle=false; if(typeof parent !== "undefined") inputsToHandle=parent.find(""); else inputsToHandle=$("");//ну, а если родитель не задан – давайте уж все проверим //хватаем найденные элементы и наблюдаем их inputsToHandle.each(function(){ if(error) error=cFM_prepareChecking(this);//проверяем объекты, ищем хотя бы единственную ошибку else cFM_prepareChecking(this); }); return error;//возвращаем true, если все элементы прошли ошибку, и false, если кто-то завалился } function cFM_prepareChecking(handle)// запускает проверку конкретного элемента и маркерует ошибочные { var error=true;/*возвращаемое значение; смысл - просто показать, что есть ошибка принимает значение: true - нет ошибок; false - поле не заполнено; "wrong" - поле заполнено неправильно;*/ //определяемся с подписью поля в случае обнаружения в нем ошибки. По умолчанию будет выводиться //"Укажите значение поля", если title не задан var title = " значение поля"; if(typeof $(handle).attr("title") !== "undefined" && $(handle).attr("title").length>0) 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));"».
Давайте теперь попробуем реализовать проверку такой простенькой формы.
весёлый усач 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< 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(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.
| Назад |
