Advertisement
  1. Code
  2. WordPress

Додаємо форму перевірки до коментарів WordPress за допомогою jQuery

Scroll to top
Read Time: 11 mins

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Коли мова йде про більш простий UX, миттєва поява форми підтвердження на тій самій сторінці є набагато простішим варіантом, ніж перезавантаження сторінок з можливою втратою контенту. В даній статті я покажу вам, як за допомогою jQuery можна зробити миттєву перевірку на прикладі форми коментарів.

Наш приклад

Для нашого прикладу ми додамо форму підтвердження до форми коментарів в стандартній темі WordPress. Даний процес фактично однаковий для будь-якої форми підтвердження, тому дану техніку ви можете легко застосовувати не тільки для WordPress.
Тема, до якої ми додамо форму валідації, є стандартною темою WordPress, яка надається разом з інсталяцією. Тому, якщо ви хочете повністю слідувати за мною, просто перейдіть на wordpress.org і інсталюйте копію на ваш сервер.

Якщо ви не знайомі з формою коментарів WordPress, ви напевно не будете заперечувати, щоб ознайомитися зі статтею NETTUTS - Unravelling the Secrets of WordPress' Comments.php




Крок 1. Завантажте jQuery та Bassistance.de Validation Plugin.

Ви можете завантажити jQuery на сайті jQuery.com. На першій сторінці ви безпосередньо побачите "Завантажте jQuery" і ще декілька завантажень. Ми не будемо метушитися біля фреймворка jQuery, тому ви можете завантажити версію "Minified and Gzipped", тобто компресовану.

Далі нам потрібен плагін перевірки jQuery від bassistance.de. Він дозволить вам перевіряти веб-форми, ви можете завантажити його тут. Цей файл містить декілька файлів Javascript, але для цього уроку нам потрібен тільки "jquery.validate.min.js" (також компресований).

Крок 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>. Теги заголовка розміщені в 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

Як бачите, ID форми є в "#commentform". Це активує перевірку для будь-якої форми з id commentform.
Тому будьте уважними, щоб не дублювати ID, інакше інші форми також потребуватимуть перевірки, хоча в цьому немає потреби.

Зараз, коли ви надсилаєте коментарі і залишаєте пустими всі поля - нічого не відбувається, як і раніше відображається дефолтна помилка WordPress. В наступному кроці я покажу вам, як почати перевірку для кожного поля.

Крок 5. Перевірка імені поля.

Тепер настав час для перевірки кожного поля. Це означає, що нам потрібно вказати файлу javascript, яка саме перевірка потребується. Перевіркою javascript дуже просто користуватися: вам потрібно ввести тільки декілька спеціальних слів для початку перевірки. Тому почнемо з першого поля, тобто імені поля, що виглядає наступним чином:

Ми хочемо переконатися, що коментатор заповнив поля і, якщо це можливо, дізнатися, що введено хоча б 4 символи. Саме так! Але як це зробити? Ну, це дуже просто. Ви можете визначити перевірку викликавши клас. Тому просто додайте class = "required".

І WTF працює! Якщо ви натиснули кнопку відправки не ввівши ім'я, то отримали повідомлення: "Поле обов'язкове для заповнення" ("This field is required"). Чудово! А як на рахунок випадку, коли користувач не вів мінімальне число символів?
Ми можемо просто здійснити цю перевірку, додавши до опцій поля minlength = "4":

І тепер, коли ви щось вводите (менше 4 символів), ви побачите, що з'являється нове повідомлення: "Будь ласка, введіть щонайменше чотири символи" ("Please enter at least 4 characters."). Таким чином все ідеально працює! MinLength дозволяє встановити мінімальну кількість символів, просто змініть число на необхідне на вашу думку.

Крок 6. Перевірка поля пошти.

Далі ми будемо перевіряти поле електронної пошти. Ось, як це виглядає:

Я знаю, що ви думаєте: ми робимо все, як і в попередньому кроці. Це не зовсім так, оскільки це не просто обов'язкове поле, електронна пошта також повинна бути коректною. Тепер ми знаємо, що додавши class="required", ми робимо поле обов'язковим для заповнення, але як щодо перевірки email? Це настільки ж просто: ми просто додаємо email.

Що-що? Просто додаємо "email" і він перетворюється на class="required email". Це робить поле обов'язковим, а також перевіряє дійсність електронної пошти:

Якщо ви випробовуєте поле email, ви помітите, що при відправленні, з'являється повідомлення: "Поле обов'язкове для заповнення". Це добре! Тепер, коли ви вводите щось, відмінне від формату xx@xx.xx, з'являється повідомлення: "Будь ласка, введіть вірну електронну адресу." ("Please enter a valid email address."). Значить все працює ідеально! Бачите, як просто!

Крок 7. Перевірка поля веб-сайту.

Ми збираємося перевіряти поле веб-сайту? Воно не є обов'язковим, вірно? Так, ви праві. Але нам потрібен правильний URL! Тому ми перевіримо URL. Це настільки ж просто, як і попередні перевірки, але спочатку давайте подивимось на саме поле URL:

Тепер ви можете зробити його обов'язковим і встановити мінімальну кількість символів, але, думаю, для цього поля це не обов'язково.
Мені просто потрібен вірний URL, то як це зробити? Ми просто додаємо інший клас, але цього разу ми називаємо його class="url", тому давайте зробимо це:

І що ви думаєте?! Я ввів в полі веб-сайту "blabla", і з'являється повідомлення: "Буль ласка, введіть вірний URL.", а коли я залишаю його пустим і натискаю кнопку підтвердження, повідомлення, що це поле є обов'язковим, не з'являється.
Отже, воно теж працює вірно, саме так, як я хотів! Як бачите, завдяки jQuery і плагіну перевірки все дуже просто.

Крок 8. Перевірка поля коментарів.

Це останнє поле для перевірки. Я не люблю короткі повідомлення спама на зразок "натисніть кнопку" і подібні коментарі, але я не можу терпіти і довгі повідомлення, на які витрачають години, щоб прочитати і які насправді - чистий спам. Тому я віддаю перевагу мінімальній і максимальній кількості символів. Але спочатку перевіримо поле коментарів.

Ви вже знаєте перший крок: додайте клас (class="required"), щоб переконатися, що в поле введено якийсь текст. Тепер визначаємо мінімум, ви ж пам'ятаєте, чи не так? (minlength = "") Думаю, щонайменше 10 слів повинні бути надруковані. Отже, це буде minlength = "10" - дуже просто. Тепер ми хочемо встановити максимум, але як саме? Плагін має хороше рішення на цей випадок: замість minlength додайте maxlength плюс кількість слів. Думаю, 100 слів буде достатньо, тому додайте maxlength = "100".

ТАК ЛЕГКО! Так, я знаю! Ось як це виглядатиме:

Так що тепер, коли ви відправляєте пусту форму, як і в попередніх випадках, з'явиться повідомлення: "Поле обов'язкове для заповнення", але, якщо ви введете менше десяти символів, з'явиться: "Будь ласка, введіть щонайменше 10 символів", а якщо ви введете більше ста, то отримаєте таке ж повідомлення. Отже ми закінчили перевірку! Проте це ще не все, потрібно додати стиль.

Крок 9. Стилізація форми.

Не знаю, як вам, а мені не подобається, як виглядає наша форма. Вона неохайна і повідомлення про помилки абсолютно не стилізовані. Тому ми будемо стилізувати абсолютно все, щоб воно виглядало красиво і акуратно. Перш за все, я хотів би змінити розташування лейблу. Як бачите, Спочатку він показує "input field", потім "error", а далі "field label".

Думаю, що воно повинно виглядати наступним чином: "Field label", "input field" і потім "error". Для цього, ми просто переміщує лейбл над html. Отже давайте замінимо перше поле від:

До:

Як бачите, єдине що ми зробили, це перемістили <label> над <input>. Якщо зараз ви оновите сторінку з коментарями, ви побачите, що ім'я (обов'язкове) перемістилося перед полем введення.
Повторіть цей крок для всіх полів введення. В результаті це має виглядати ось так:

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

Виглядає не набагато краще, чи не так? це тому, Ще нам все що потрібно стилізувати його! Отже, настав час відкрити файл теми CSS. CSS файл для цієї теми можна знайти в "/ wp-content/themes/default/style.css". Просто відкрийте цей файл і спустіться вниз.

Отже, ми почали стилізацію, нам потрібно переконатися, що CSS впливатиме тільки на форму. Завдяки id форми ми можемо це здійснити. Отже перед кожним рядком CSS ми додаємо: #commentform. сlassname, чим переконуємося, що ці дії впливатимуть тільки на форми між <form></form>.

Почнемо з тега label, тому додамо його до CSS:

Тепер ми можемо застосувати CSS до лебл, ввівши параметри між { і }. Спочатку встановимо ширину, тобто скільки простору він займатиме (близько 200px буде добре). Ви можете прочитати всі рядки, при цьому текст не необрізаний.

Тепер, як бачите, нічого не відбувається. Це тому, що нам потрібно переконатися, що лейбли залишаються ліворуч. Для цього можна скористатися float:

Тепер це має наступний вигляд! Далі стилізуємо поля введення та область тексту.
Щоб застосовувати CSS для цих полів, ми можемо викликати їх за допомогою "input" та "textarea". Давайте це зробимо плюс додамо невеличкий відступ:

Тепер я хочу, щоб усі поля, а також і область тексту були однакової довжини. Тому ми застосовуємо фіксовану ширину наступним чином:

Крок 10. Стилізація повідомлення про помилку.

Тепер, коли ви натиснете на кнопку підтвердження, ви побачите, що повідомлення про помилку виглядають не дуже красиво. Мені здається, вони повинні бути безпосередньо під полями ведення. Коли скрипт валідації виводить помилку, html виглядатиме наступним чином:

Це говорить нам про те, що згенерувані помилки отримують клас "error", тому давайте виправимо це і помістимо помилку під поля введення.
Пам'ятайте, що ширина labels - 200px, тому нам потрібно вирівнятися по лівому краю:

Але це досить "мілко", тому давайте додамо колір фону  і відступи.

Ще одна річ, що робить вигляд поганим, - це розмір шрифту, а також немає проміжків (відстані між текстом і сірими межами) і відступів (простору між помилками і полями). Крім того, все виглядало б набагато краще, якщо ширина помилки та поля введення була б однаковою. Тому спробуємо наступне:

Ви бачите, що я відредагував ширину. Вам постійно потрібно робити якийсь "трюк", щоб все було як "під одну лінійку".

На даний момент все виглядає чудово, але ми щось забули! Я знаю - це зображення помилки! Давайте спробуємо famfamfam icon.

Мабуть, це не зовсім те що потрібно! Нам потрібно змістити текст вправо, для чого скористаємося padding-left:

Завжди пам'ятайте, що використання padding збільшує фіксований розмір. Ми застосували 20 px padding зліва, що означає, що нам потрібно відняти 20 px від ширини. Ось чому я зменшив ширину до 209 (229-20).

Ну ось і все! Плагіном валідації jQuery неймовірно просто користуватись і застосовувати. Ви можете використовувати цю техніку для будь-якої форми, не тільки для коментарів WordPress.




Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.