Немножко истории…
Вчера я работал над одним заказом, точнее дорабатывал его. В админке WordPress я создал поля для вставки телефонов, адресов и т.д.
Заказчик попросил к полям формы сделать еще проверку на заполнение проверки формы, чтобы пользователи не могли отправлять их пустыми. Все это можно было сделать простым методом проверки полей через HTML5. Но такой способ мне не подходил.
Стал я думать над этим вопросом, и решение пришло! Можно осуществить проверку на заполнение полей формы с помощью JQuery Validation
. Этот способ можно использовать на любых движках, сайтах и т.д.
Итак, плагин JQuery Validation
проверяет поля формы на созданные вами правила и, если есть не соответствие, выводит динамические ошибки, которые сделал пользователь при заполнении формы.
Приступим к созданию формы.
Ваше Имя:
Ваш пароль:
Обратите внимание на id="myform-1 " , name="login " , name="password " . Эти названия я буду использовать, когда буду создавать правила проверки формы. Вы по желанию можете назвать своими именами.
Вставьте этот код между тегами :
Разберем немного код.
Пункт №3
.
$("#myform-1").validate({
«myform-1» – это название формы и взято оно здесь:
Пункт №5.
rules:{
– означает правила. Здесь нужно писать правила для полей между скобками rules:{ }
Пункт №7.
login:{ – здесь создаем правила для поля «Имя». Взяли имя поля из формы
Правила пишем через запятую между скобками login:{ }
Пункт №13 .
password:{ – здесь создаем правила для поля с паролем. Взяли имя поля из формы
Правила пишем через запятую между скобками password:{ }
Пункт №20 .
messages:{ – здесь выводим для каждого правила и для каждого поля сообщение об ошибке.
В коде я написал к каждому пункту подсказки, так что проблем, я думаю, быть не должно.
Для заметок:
Вот так выглядит шаблон файла для создания правил - «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, точки и дефиса"; }
Данный урок описывает, как создать JavaScript форму, которая проверяет правильность заполнения посетителем полей перед отправкой данных на сервер. Сначала мы объясним, почему проверка заполнения формы является полезной методикой, а затем построим простой пример с объяснением, как все происходит.
Зачем нужна проверка заполнения формы?Проверка заполнения формы - процесс, при котором данные формы проверяются перед обработкой. Например, если Ваша форма имеет поле, в которое пользователь должен ввести email адрес, возможно Вы захотите проверить, что поле заполнено, прежде чем начать дальнейшую обработку формы.
Существует два основных метода для проверки заполнения формы: на стороне сервера (с использованием CGI скриптов, ASP и т.д.) и на стороне клиента (обычно используется JavaScript). Проверка на стороне сервера более безопасная, но в большинстве случаев требует более сложного кода, в то время как проверка на стороне клиента выполняется проще и быстрее (браузер не нуждается в соединении с сервером для проверки заполнения формы, таким образом, пользователь получает немедленный ответ в случае пропущенных полей, которые необходимо заполнить).
Проверка формы на стороне клиента. Обычно выполняется с помощью встроенного JavaScript скрипта.
Проверка формы на стороне сервера. Обычно выполняется с помощью CGI или ASP скрипта.
В данном уроке мы построим простую форму с проверкой на стороне клиента с помощью JavaScript. Вы сможете затем адаптировать ее под свои нужды.
Простая форма с проверкой.Давайте построим простую форму с проверкой заполнения с помощью скрипта. Данная форма имеет одно текстовое поле "Ваше имя" и кнопку для отправки данных. Наш скрипт проверяет, что пользователь ввел свое имя перед тем, как отправить данные на сервер.
Откройте форму и посмотрите в действии. Попробуйте нажать кнопку "Отправить данные" ничего не вводя в поле "Ваше имя".
Страница содержит функцию JavaScript, которая называется validate_form(). Она выполняет проверку заполнения формы. давайте посмотрим сначала на форму.
ФормаПервая часть формы - тэг form
Форма имеет имя contact_form. С его помощью мы получим доступ к форме из JavaScript функции проверки.
Форма использует постметод для отправки данных в htm-файл заглушку, который просто выводит сообщение. В действительности Вы можете пересылать данные Вашему CGI скрипту, ASP странице и т.д. (например для отправки почты).
Также тэг form содержит onsubmit атрибут для вызова JavaScript функции проверки validate_form (), когда нажимается кнопка "Отправить данные". Функция возвращает логическое значение, для которого true означает "проверка прошла успешно", а false - "данные задержаны". Таким образом мы можем предотвратить отправку данных формы, если пользователь не заполнил ее правильно.
Остальной код формы добавляет поле ввода contact_name и кнопку "Отправить данные":
Пожалуйста введите Ваше имя.
Ваше имя:
Функция validate_form()Функция проверки формы validate_form() встроена в секцию head вначале страницы:
Первая строчка () указывает браузеру, что далее идет код JavaScript, а коментарий HTML (
Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.
Теперь попробуем написать проверочную функцию, привязанную к данной конкретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое - это проверить содержимое каждого из обязательных полей на отсутствие текста:
<
script language
=
"javascript"
>
Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
Сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.
Универсальная функция проверки
Если нам необходимо проверить всего два или три поля, то с таким методом проверки "по-одиночке" ещё можно смириться, но что, если их несколько десятков? А ведь такое не редкость - особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.
Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:
Required = new array("name", "email");
Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.
Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:
Required_show = new array("Ваше имя", "электронный адрес");
Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введён".
Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:
<
script language
=
"javascript"
>
В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом - введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.
Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.
| Назад |
