Перевірка форм на jQuery

Перевірка форми для коментарів з допомогою плагіна jQuery jquery.validation_form.js

У продовження теми "перевірка паролів на javascript" вирішив зробити плагін перевірки форм для найпоширенішою javascript бібліотеки - jQuery.

Підключення плагіна

Плагін легко підключається і налаштовується.



$ (Document). Ready (function ()
{
var options_comment = {
validation_form: ". comment"// class форми, яку будемо перевіряти
}
$ (). ValidateThis (options_comment);
}
);

Ім'я

E-mail

Сайт

Текст коментаря

Звернення до елементів йде через атрибут "class". У плагіні передбачені класи по-замовчуванню, але Ви завжди можете їх змінити у налаштуваннях плагіна.

Значення по-замовчуванню:

important_marker: "*" - цим будуть позначені поля, обов'язкові для заповнення
min_pass: 6 - мінімальна довжина пароля
email_error_message: "некоректний email" - повідомлення про помилку в emaile
email_valid_message: "правильний email" - повідомлення про правильне emaile
pass_error_message: "паролі не співпадають" - повідомлення про розбіжності паролів
pass_valid_message: "паролі збігаються" - повідомлення про збіг паролів
container_valid_pass_width: 300 - ширина (в пікселях) контейнера індикатора паролів
validPassMarker_dx: 20 - крок індикатора паролів
validation_form: ". validation_form" - клас перевіряється форми
focus: ". focus" - клас поля, в який буде у фокусі при завантаженні сторінки
text: ". text" - клас полів, які підлягають перевірці
checkbox: ". checkbox" - клас перевіряються чекбоксів
radio: ". radio" - клас перевіряються радіокнопок
email: ". email" - клас поля emaila
password1: ". password1" - клас поля пароля, в якому перевіряється довжина пароля
password2: ". password2" - клас поля підтвердження пароля
important: ". important" - клас поля, обов'язкового для заповнення
submit: ". submit" - клас кнопки відправки форми (вказується, якщо хочемо зробити кнопку submit не активно по-замовчуванню)
after_input: "p" - елемент додається після перевіряється поля для вставки в нього підказок

Стилі підказок, маркерів і індикаторів легко настроюються в зовнішньому CSS - файлі.

Тепер розглянемо детальніше на прикладі

Створимо для прикладу форму для коментарів

Формі задамо клас "comment" (class = "comment")
Полю для введення імені задамо класи "text important" (class = "text important"). Клас text вказує, що це поле необхідно перевіряти, а клас important - означає, що це поле є обов'язковим для заповнення.
Полю для введення e-mail'a задамо класи "text email important" (class = "text email important"). У цьому полі додався клас email. Він означає, що це поле необхідно перевіряти на валідність e-mail'a.
Поле сайт не є обов'язковим для заповнення, тому в нього тільки клас "text" (class = "text ").
Поле з текстом коментаря обов'язково для заповнення, тому йому присвоюємо класи "text important" (class = "text important").
Кнопки submit ставимо клас "submit" (class = "submit"), щоб зробити її не активної по-замовчуванню.

У результаті у нас вийшов наступний код:

Ім'я

E-mail

Сайт

Текст коментаря

Якщо у Вас виникли питання, пишіть в комментаріях.Скачать плагін jquery.validation_form.js (37 Kb) з прикладами.