Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Добавление проверки формы в комментарии WordPress с использованием jQuery

by
Length:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

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

Наш пример

Для нашего примера мы собираемся добавить проверку формы в форму комментария в стандартной теме WordPress. Однако процесс практически одинаков для любого типа проверки формы, поэтому вы можете легко применить эту технику к чему-то другому.
Тема, к которой мы добавим проверку, - это тема WordPress по умолчанию, которая поставляется вместе с каждой установкой. Поэтому, если вы хотите полностью следовать, просто зайдите на Wordpress.org и скачайте и установите копию на свой сервер.

Если вы не знакомы с формой комментариев WordPress, возможно, вы захотите посетить учебник по NETTUTS - Раскрытие секретов WordPress 'Comments.php




Шаг 1 - Загрузите jQuery и плагин проверки Bassistance.de

Вы можете скачать jQuery на веб-сайте jQuery.com. На первой странице вы увидите «Скачать jQuery и несколько разных загрузок». Мы не собираемся возиться с инфраструктурой jQuery, поэтому вы можете скачать версию «Minified and Gzipped». это означает, что она сжата.

Далее нам понадобится плагин проверки jQuery, созданный bassistance.de. Этот плагин позволяет проверять веб-формы, вы можете скачать его здесь. Этот файл содержит несколько файлов Javascript, но нам нужен только «jquery.validate.min.js» (также сжатый) для этого урока.

 Шаг 2 - Загрузка файлов

Теперь у вас должно быть 2 файла: «jquery.validate.min.js» и «jquery-1.2.6.min.js», мы собираемся загрузить это в наш каталог шаблонов WordPress.

Поскольку в этом уроке мы используем стандартную тему WordPress, буквально называемую «default», необходимая нам папка находится в /wp-content/themes/default/.

Чтобы все было организовано, мы создадим новый каталог с именем «js», это будет папка со всем javascript. После создания каталога загрузите файлы в папку, которую мы только что создали. (/wp-content/themes/default/js)

 Шаг 3 - Загрузка Javascript

Теперь, когда у нас есть загруженный JavaScript в нашем каталоге, нам все еще нужно загрузить его в нашу тему. Javascript должен загружаться между тегами head>/head> . Теги head расположены в php-файле, который находится в каталоге темы.

Поэтому найдите «header.php», это файл, в котором находится верхняя часть кода темы. Теперь мы должны убедиться, что добавили JavaScript перед этими двумя строками:

Вот как мы включаем файл JavaScript:

Конечно, когда вы создаете тему WordPress для клиента, вы хотите убедиться, что ее легко установить. Вы не хотите говорить: «Вы все равно должны изменить URL на JavaScript!»
Мы хотим, чтобы все происходило автоматически, поэтому лучше всего использовать теги WordPress. Для отображения URL-адреса каталога шаблонов вы можете использовать этот код:

Таким образом, в сочетании с кодом для включения JavaScript, конечный результат:

Теперь эти 2 файла javascript будут загружены на каждой странице и могут быть использованы на всех страницах WordPress, используя эту тему!

 Шаг 4 - Активация проверки

Хорошо, теперь пришло время активировать проверку формы комментария, поэтому вернитесь в каталог темы и найдите /wp-content/themes/default/comments.php

Теперь нам нужно только взглянуть на форму кода! Форма начинается со строки 73 и выглядит так:

Теперь, как вы можете видеть, форма имеет элемент ID, он называется «commentform», нам нужно это имя, чтобы активировать JavaScript.
Пока не закрывайте этот файл, сначала переключитесь обратно на «header.php» и добавьте эти строки ниже jquery.validate.min.js

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

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

 Шаг 5 - Проверка поля имени

Теперь пришло время начать проверку для каждого поля. Это означает, что нужно сообщать файлу javascript проверки, какой тип проверки требуется. Проверка Javascript очень проста в использовании, вам нужно всего лишь ввести несколько специальных слов, чтобы начать проверку. Итак, давайте начнем с первого поля, это обязательное поле имени, поле выглядит так:

Мы хотим убедиться, что комментатор заполнил это поле, и, если возможно, убедиться, что введено не менее 4 символов. ДА! но как? Ну, это очень просто, вы можете определить валидацию, вызвав класс. Так что просто добавьте class = 'required'.

И WTF это работает! Если вы нажмете «отправить», не введя свое имя, вы получите «Это обязательное поле для заполнения». Замечательно!! Так что, если пользователь не введет минимальное количество символов?
Ну, мы можем просто добавить эту проверку, добавив minlength = '4' к опциям поля:

И теперь, когда вы вводите что-то (менее 4 символов), вы увидите новое сообщение «Пожалуйста, введите не менее 4 символов». Так что это работает отлично! Minlength позволяет установить минимальное количество символов, просто замените число на то, что вы считаете необходимым.

 Шаг 6 - Проверка почтового поля

Далее мы проверим поле электронной почты, так вот как это поле выглядит:

Я знаю, что вы думаете, мы делаем то же самое, что и в предыдущем шаге. Ну, это было бы неправильно, потому что, кроме обязательного поля, он также должен быть действующим адресом электронной почты. Теперь мы знаем, как установить его как обязательный, просто добавив class = 'required', но как проверить адрес электронной почты? Ну, это так же просто, как установить его как обязательный, за исключением того, что теперь мы просто добавляем электронную почту.

А что? Просто добавьте «email», чтобы оно стало class = «required email», это делает его обязательным и проверяет действительный адрес электронной почты:

Если вы попробуете поле электронной почты, вы заметите, что оно отвечает: «Это поле обязательно для заполнения». когда представленно, это хорошо! И теперь, когда вы вводите что-то, что не в этом формате: xx@xx.xx, он будет отвечать «Пожалуйста, введите действительный адрес электронной почты». так что работает отлично! Посмотрите, как это просто!

 Шаг 7 - Проверка веб-сайта

Собираемся ли мы проверить поле сайта? Оно не всегла верно? Да ты прав! Но мы хотим действительный URL! Итак, мы собираемся проверить URL, это так же просто, как предыдущие проверки, но сначала давайте посмотрим на поле URL:

Теперь вы можете установить его и установить минимальное количество символов, но я не думаю, что это необходимо для этого поля.
Я просто хочу действительный URL, и как его получить? Мы просто добавляем другой класс, но на этот раз мы называем его class = 'url', поэтому давайте добавим это:

А что вы знаете! Я вписываю «blabla» в поле веб-сайта, и он сразу возвращает «Пожалуйста, введите действительный URL-адрес», и когда я оставляю его пустым, он не говорит, что требуется, когда я отправляю.
Так что работает отлично, как я и хотел! Как видите, это очень легко благодаря jQuery и плагину проверки.

 Шаг 8 - Проверка поля комментария

Это последнее поле для проверки, теперь мне не нравятся короткие спам-сообщения, такие как «щелкни по мне» и подобные комментарии, но я также ненавижу длинные сообщения, которые читаются часами или просто полны спама. Поэтому я хотел бы минимальное и максимальное количество символов. Но сначала давайте проверим поле комментария:

Хорошо, вы знаете шаг 1, добавьте требуемый класс (class = 'required'), чтобы убедиться, что что-то набрано в текстовой области. Теперь минимум, вы помните, верно? (minlength = '') Теперь я думаю, что нужно набрать как минимум 10 слов. Так что это будет minlength = '10', это все еще так просто. Но сейчас мы хотим установить максимум, но как? Ну, у плагина есть решение для этого, вместо minlength просто добавьте maxlength плюс количество слов. Я думаю, что 100 слов достаточно, поэтому добавьте maxlength = '100'.

 ЛЕГКО! Да, я знаю! Так вот как это выглядело бы:

Так что теперь, когда вы отправляете форму с не заполненным полем, она будет говорить, как и все остальные поля: «Это поле обязательно для заполнения», но если вы введете менее 10 символов, появится надпись «Пожалуйста, введите не менее 10 символов». и если вы введете больше 100, появится надпись «Пожалуйста, введите не менее 10 символов»! Итак, мы завершили валидацию!! Но это еще не все, нам все еще нужно это стилизовать!

 Шаг 9 - Формирование стиля

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

Я думаю, что это должно выглядеть так: «Метка поля», «поле ввода», а затем «ошибка», чтобы сделать это, нам нужно только переместить метку выше HTML. Итак, давайте изменим первое поле с:

Для того, чтобы:

Как вы можете видеть, единственное, что мы сделали, это переместили над input>.Теперь, когда вы обновите страницу комментариев, вы увидите, что текст «Имя (обязательно)» перемещен перед полем ввода.
Теперь повторите этот шаг для всех полей ввода, в конце он должен выглядеть так:

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

Это выглядит не намного лучше, не так ли? Ну, это потому, что нам все еще нужно это стилизовать! Итак, пришло время открыть файл CSS темы. Файл CSS для этой темы можно найти в «/wp-content/themes/default/style.css», просто откройте этот файл и прокрутите его до конца.

Хорошо, мы настроены начать стилизацию, но мы хотим убедиться, что этот CSS влияет только на форму. Благодаря идентификатору формы мы можем быть уверены, что это произойдет. Таким образом, перед каждой из добавляемых нами строк CSS мы обязательно введем commentform .classname, это будет влиять только на поля между form>. 

 Сначала мы начнем с метки тега, поэтому добавим это в CSS:

Теперь мы можем применить CSS к метке, набрав опции между {и}. Итак, сначала давайте установим ширину, это то, сколько места он получит, около 200 пикселей. Вы все еще можете прочитать все строки, и текст не обрезается.

Теперь, как вы видите, ничего не происходит. Это потому, что нам все еще нужно убедиться, что ярлыки остались. Мы можем использовать float для этого:

Теперь это похоже на то, что нужно! Теперь давайте стилизуем поля ввода и текстовую область.
Чтобы применить CSS к этим полям, мы можем вызвать их с помощью «input» и «textarea». Итак, давайте добавим это плюс немного границы:

Теперь я хочу, чтобы все поля были одинаковой длины, как и текстовая область. Итак, мы собираемся применить фиксированную ширину, вот так:

Шаг 10 - Ошибка стиля

Теперь, когда вы нажмете «Отправить», вы увидите, что сообщения об ошибках выглядят не очень хорошо. И я думаю, что они должны быть чуть ниже полей ввода. Когда скрипт проверки выдаст ошибку, HTML будет выглядеть так:

Это говорит нам о том, что сгенерированные ошибки получают класс «error», так что давайте попробуем это и переместим ошибку ниже полей ввода.
Помните, что метки имеют ширину 200 пикселей, так что вы знаете, что для этого количества пикселей мы должны оставлять отступы:

Но это немного ясно, поэтому давайте добавим цвет фона и рамку:

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

Вы можете видеть, что я отрегулировал ширину, вам всегда нужно немного подправить, чтобы все выровнялось:

Это уже выглядит великолепно, но чего-то не хватает! Я знаю ошибку изображения! Давайте попробуем иконку famfamfam.

Ну, это не совсем так, я думаю! Мы должны переместить текст вправо, мы можем сделать это, используя padding-left:

Всегда помните, что использование отступов увеличивает фиксированный размер, поэтому мы применили отступ в 20 пикселей влево, что означает, что мы должны вычесть 20 пикселей из ширины. Вот почему я изменил ширину на 209 (229-20)

И это все! Плагин проверки jQuery чрезвычайно прост в использовании и применении, и вы можете использовать эту технику в любой форме, а не только в формах комментариев WordPress.




Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.