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

Вчера я работал над одним заказом, точнее дорабатывал его. В админке 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, точки и дефиса"; }

Данный урок описывает, как создать 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 (