Проверка на заполнение полей формы jquery. Защита от дурака. Анализ вариантов проверок

Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

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

Для осуществления задуманного, нам нужно для начала создать саму форму. У Вас она уже может быть, если вы захотите данный материал внедрить в нее, нужно будет его адаптировать под вашу форму. Я же покажу все на своем примере. Моя форма ничего не будет отправлять, в этой статье нет обработчика для отправки писем, чтобы не усложнять материал. Обработчик отправки писем, это другая история. Для начала сам HTML код формы.

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

• id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
• - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
• onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ . Предпоследняя строка в коде.
• Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

#file_form{ width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; } .in_pl{ width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box-shadow:0 0 5px rgba(0,0,0,.2) inset; background:#fff; } .in_pl:focus{ background:#fff; } #sub_f{ padding:5px 15px; border:none; border-radius:25px; box-shadow:0 0 2px 1px rgba(0,0,0,.2); background:#36c; color:#fff; cursor:pointer; } #sub_f:hover{background:#333;} .fl_fr{ width:100%; text-align:center; font-size:15px; color:#333; cursor: pointer; border:none; margin-bottom:10px; } #messenger{ text-align:center; display:none; color:#f00; margin:15px 0; } .notvalid{background:rgba(255,0,0,.2);}

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

• #messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
• .notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

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

Так как наш скрипт работает с помощью jQuery , нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .

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

";
endif;
?>

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

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

В своей практике мне тоже приходилось использовать разные варианты проверки заполнения полей формы в зависимости от конкретных условий. И в файле *.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));"».

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

Немножко истории…

Вчера я работал над одним заказом, точнее дорабатывал его. В админке WordPress я создал поля для вставки телефонов, адресов и т.д.

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

Стал я думать над этим вопросом, и решение пришло! Можно осуществить проверку на заполнение полей формы с помощью JQuery Validation . Этот способ можно использовать на любых движках, сайтах и т.д.
Итак, плагин JQuery Validation проверяет поля формы на созданные вами правила и, если есть не соответствие, выводит динамические ошибки, которые сделал пользователь при заполнении формы.

Приступим к созданию формы.

Создайте файл для формы. Если есть файл с формой, значит, пропустите первый пункт. Вот так выглядит код формы:

Ваше Имя:

Ваш пароль:

Обратите внимание на id="myform-1 " , name="login " , name="password " . Эти названия я буду использовать, когда буду создавать правила проверки формы. Вы по желанию можете назвать своими именами.

К файлу, где будет размещена форма, плагин JQuery Validation и файл с расширением «.js », где будете писать свои правила для проверки формы.
Вставьте этот код между тегами :

Создайте папку «js » и создайте там файл «myscriptspravil.js» с таким кодом: $(document).ready(function(){ $("#myform-1").validate({ // правила для полей с именем и паролем rules:{ login:{ required: true, // поле для имени обязательное для заполнения minlength: 4, // в поле для имени должно быть не меньше 4 символов maxlength: 16, // в поле для имени должно быть не больше 16 символов }, password:{ required: true, // поле для пароля обязательное для заполнения minlength: 6, // в поле для пароля должно быть не меньше 6 символов maxlength: 16, // в поле для пароля должно быть не больше 16 символов }, }, // сообщение для поля с именем и пароля, если что-то было не по правилам messages:{ login:{ required: " Это поле обязательно для заполнения", // сообщение для имени, если поле не заполнено minlength: " Имя должно иметь минимум 4 символа", // сообщение для имени, если в поле меньше 4 символов maxlength: " Максимальное число символов для имени - 16", // сообщение для имени, если в поле больше 16 символов }, password:{ required: " Это поле обязательно для заполнения", // сообщение для пароля, если поле не заполнено minlength: " Пароль должен иметь минимум 6 символов", // сообщение для пароля, если в поле меньше 6 символов maxlength: " Максимальное число символов - 16", // сообщение для пароля, если в поле больше 16 символов }, } }); });

Разберем немного код.
Пункт №3 .

$("#myform-1").validate({

«myform-1» – это название формы и взято оно здесь:

Пункт №5.
rules:{ – означает правила. Здесь нужно писать правила для полей между скобками rules:{ }

Пункт №7.

login:{ – здесь создаем правила для поля «Имя». Взяли имя поля из формы

Правила пишем через запятую между скобками login:{ }

Пункт №13 .

password:{ – здесь создаем правила для поля с паролем. Взяли имя поля из формы

Правила пишем через запятую между скобками password:{ }

Пункт №20 .

messages:{ – здесь выводим для каждого правила и для каждого поля сообщение об ошибке.

В коде я написал к каждому пункту подсказки, так что проблем, я думаю, быть не должно.

Можно создать стили CSS для ошибок: .error { color: red; }

Вот, что в результате должно получиться:

Для заметок:

Вот так выглядит шаблон файла для создания правил - «myscriptspravil.js »:

$(document).ready(function(){ $("#название формы").validate({ rules:{ // здесь пишем правила }, messages:{ // здесь сообщение } }); });

Список правил :

required - поле обязательное для заполнения (true или false)

email - проверяет корректность e-mail адреса (true или false)

url - проверяет корректность url адреса (true или false)

date - проверка корректности даты (true или false)

dateISO - проверка корректности даты ISO (true или false)

digits - только цифры (true или false)

maxlength - максимальное кол-во символов

minlength - минимальное кол-во символов

rangelength - кол-во символов от и до (rangelength: )

range - число должно быть в диапазоне от и до (range: )

max - максимальное значение числа

min - минимальное значение числа

Можете посмотреть документацию по плагину и по правилам .

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи: 18 Ответов на комментарий - Проверка заполнения полей формы с помощью jQuery

ухх, понимаю что тема нужная. И мне требуется, чтоб при регистрации роботы отсеивались, но как это встроить – мне не по зубам. Вижу эти крестики-нолики и глаза в кучу сразу…

Людмила, я могу чем-то помочь?

Людмила Лао отвечает:
03.07.2015 в 09:16

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

Зачем Вам на блоге нужна регистрация?
Попробуйте поставить капчу.

Людмила Лао отвечает:
03.07.2015 в 10:20

у меня установлена невидимая капча. спасает от спам-комментариев, но не помогает от регистрации…

а еще – как вообще можно убрать пункт регистрации из доступа?
мне периодически она только нужна, вот, недавно приняла нового автора на сайт. Так же в дальнейшем нужен будет редактор.

В админке, перейдите “Настройки” => “Общие” и уберите птичку над пунктом “Членство” (Любой может зарегистрироваться).
Нового автора или редактора можно добавить вручную. “Пользователи” => “Добавить нового”.
Чтобы забрать на блоге блок регистрации и входа, нужно зайти во “внешний вид” => “виджеты” и убрать блок “Мета”.
Напишите, Людмила, если получили полный ответ на вопрос?! И обязательно напишите, решилась ли ваша проблема!

Людмила Лао отвечает:
03.07.2015 в 12:44

Степан!
Ё п р с т)) забыла совсем про эту злосчастную галочку, спасибо!! Виджет убирать не хочу, т.к. сама через него захожу, а в остальном, еще раз целую!!! Решили мою проблему, легко и просто. Ато замучилась удалять этих ботов. набивается за раз от 10 до 60.

Здравсвуйте! Вот.. сделал всё как Вы тут написали, но у меня ничего на траничке не происходит.. не знаю,в чем проблема, помогите, пожалуйста.

Я вот только не могу понять, зачем для проверки формы тащить на страницу 3 библиотеки, если нативным JS это делается в три строчки, да и кроме этого input’ы в html5 давно уже поддерживает атрибуты required и pattern?

Да хоть и одну. Какой смысл? Библиотеки, а тем более фреймворки, можно (но не обязательно нужно) использовать тогда и только тогда, когда их РАЗЛИЧНЫЙ функционал будет востребован более 2-3 раз за один вызов.
Это одно из “золотых правил” программизма, как и то, что код нужно выносить в функцию тогда, когда он используется больше одного раза.

Относительно required, pattern и иных html ограничителей input’ов.
Ну, немного не то в визуальном плане, но функцию они выполняют абсолютно точно такую же – не дают пользователю ввести некорректные данные. Хотя, как мне кажется, принципиального отличия в том, что сообщение будет показываться во вплывающем окошке или в поле рядом с блоком, нету. А вот на производительность подключение библиотеки влияет.
А вообще, первоначальный посыл был к нативному JS, где валидацию одного поля и вывод сообщения можно сделать “в одну строку”.
В псевдокоде это выглядит примерно так:

InputBlock.onaction do if(inputBlock.inner == pattern) messageBlock.inner = "message_text"; end

одна из реализаций на JS:

Document.querySelector("input").onchange = function(){ if(this.value.match(/{4,}/g)) document.querySelector("label").innerHTML = "Логин должен быть не короче 4-х символов и состоять только из A-z, А-яб 0-9, точки и дефиса"; }