Перевірка заповнення форми на сайті

Абсолютно кожен власник сайта використовує на своєму сайті як мінімум одну форму. Це може бути форма зворотного зв`язку або форма коментування, не так важливо. При відправці форми, як правило, необхідно перевірити дані, чи правильно вони були введені. Наприклад, чи правильно був введений email адреса. Зазвичай Перевірка відбувається коли ми натискаємо кнопку «Відправити», і потім слід перезавантаження сторінки, після чого, якщо дані невірні, виводиться повідомлення про помилку. АЛЕ! У цьому уроці ми розглянемо як зробити перевірку форми на сайті без перезавантаження сторінки.

Перевірка заповнення форми

Для перевірки форми ми будемо використовувати jQuery бібліотеку - Validatr (скачати).

Як зробити перевірку форми у себе на сайті?

HTML

Як виглядає робота даного плагіна можна подивитися нижче, а також завантажити працює демо:

дивитися прімерСкачать

Насамперед між тегами підключимо необхідні бібліотеки (бібліотеку jQuery і Validatr):

12	lt;script src="Http://code.jquery.com/jquery-latest.min.js" type="Text / javascript"gt; lt;/scriptgt;lt;script src="Js / validatr.js" type="Text / javascript"gt; lt;/scriptgt;

Потім викличемо функцію плагіна за допомогою коду:

lt;scriptgt; jQuery (function ($) {$ ( `form`). validatr () -}) -lt;/scriptgt;

Даний код повинен бути розміщений також між тегами . Тобто плагін сам розпізнає елемент форми на сайті.

Для правильної роботи плагіна Validatr, тег повинен бути укладений в тег

. І плагін буде обробляти різні умови, які знаходяться в HTML5 атрибутах. Легше це зрозуміти на прикладі. Наприклад, якщо ви хочете щоб текстове поле приймало тільки текстові значення, то необхідно вказати йому атрибут type = "number", до такому ж стилі задається мінімальне і максимальне значення поля.

Візьмемо до прикладу наступну форму:

lt;form action="./"gt;lt;label for="Number"gt; Числоlt;/labelgt;lt;divgt;lt;input type="Number" id=`Number` step=2 min=1 max=11 name="Number" requiredgt;lt;input type="Submit" value="Відправити"gt;lt;/divgt;lt;/formgt;

Атрибут step використовується для визначення кроку. Тобто ви натискаєте на стрілочку вгору:

Відео: Перевірка заповнення реквізитів форми частина 1

Ось тут ми можемо перевірити роботу нашого валідатора. Нижче представлені приклади повідомлень якщо ввести літери або залишити поле порожнім (виведеться перше повідомлення) і, в разі, якщо ввести парну цифру (ви побачите друге повідомлення).

висновок

Валідація полів - це вкрай необхідна річ на будь-якому сайті. А валідація без перезавантаження полів є більш привабливою для відвідувача, тому що не потрібно чекати перезавантаження сторінки, а відразу можна побачити помилки.