Автоматична валідація, виправлення та підказки при заповненні форм
Всі ми заповнюємо форми даних на різних сайтах, в одних це зручно зроблено, в інших не дуже. Вам не здається, що настав час зручних форм, де є перевірка на правильність та підказки?
Ось і я подумав, що настав час, тому почав писати свій скрипт для роботи з формами (на основі jQuery), а що з цього вийшло дивіться нижче.
А тепер розберемося як це працює, від простого до складного. Для початку підключимо файл стилів та скрипт з функціями:
Перевірка валідації даних у момент їх заповнення.
Поле введення цифр проходить валідацію через функцію fieldNumber, тобто. ми просто прописали нижче за нашу форму javascript-код:
Якщо хочете обмежити максимальну кількість цифр, що вводяться (наприклад 123 символи), це можна зробити вказавши другий параметр, наприклад так:
Для подальшого розуміння відразу повідомлю, що своїй формі я додав
Перевірка обов'язковості заповнення та підказка в момент заповнення робиться так:
А якщо хочете зробити перевірку на присутність лише літер, то напишіть так:
Також, можна писати скорочену форму запису для перевірки обов'язковості (замість must написати m), у перевірці валідності сайт http://yapro.ru Fri Jul 30 2010 12:12:19 words записати як w:
Якщо захочете вивести свою підказку, зробити це можна в третьому параметрі, наприклад так:
Бувають моменти, коли підказку незручно виводити поряд із елементом заповнення, такий момент продемонстрований у radio ab. І тут правильно показати підказку щодо елемента, у якому перебувають усі значення вибору. Зробити це можна вказавши четвертим значенням true, наприклад:
$("[name=field_radio_ab]").bind("mouseover mouseout click", function()
$(this).yaproField(this.name, "must", "", true);
А якщо у Вас випадок, який продемонстрований у radio 012, то тут буде доречним змістити підказку по горизонталі та вертикалі щодо TD, вказавши 5-ий та 6-ий параметри:
$("[name=field_radio_012").closest("TD").bind("mouseover mouseout click", function()
$("#myForm").yaproField("field_radio_012", "m", "", true, -3, 3);
Підсумую за можливим вказівкою параметрів:
$("#ID_форми").yaproField("ім'я_поля", "тип перевірки даних", ["своя підказка", ["застосовувати до TD", ["відступ зліва", ["відступ зверху"]]]]));
І наостанок, якщо Ви бажаєте перевіряти дані також/коли користувач натискає джерело сайту http://yapro.ru Fri Jul 30 2010 12:12:24 GMT+0400 кнопку Відправити, то зручно застосовувати конструкцію так:
var yaproFieldTrim = false;// спочатку скасовуємо автоматичне застосування функції trim
yaproFieldTrim = true; // включаємо автоматичне застосування функції trim
error += $(this).yaproField("user_words", , true, -3, 3);
error += $(this).yaproField("field_radio_ab", "m", "", true, -3, 3);
error += $(this).yaproField("field_radio_012", "m", "", true, -3, 17);
error += $(this).yaproField("field_select", "m");
yaproFieldTrim = false; // скасовуємо автоматичне застосування функції trim
Зверніть увагу, якщо допущена помилка, то Ви можете запускати функцію srollToFirstError, яка візуально перегортає скроллбар вікна до першого з помилкою заповненого елемента. Якщо у Вас підключений плагін jQuery scrollTo, то функція зробить перегортання скроллбару дуже красиво.
Підказки:
1. Іноді можна застосовувати автоматичний фокус до полів при підведенні курсору для зручності введення даних:
2. Буваю моменти, коли формі потрібно перепризначити перевірку даних щодо введення полів, це зручно зробити так:
// Нові умови перевірки даних
3. Якщо Ви випадково неправильно оголосите форму (ID форми), з'явиться alert(), який повідомляє, що форма форма не знайдена.
4. Якщо Ви випадково вкажіть неправильну назву поля, з'явиться alert(), який повідомляє, яке саме поле вказано неправильно.
5. Якщо Ви випадково неправильно вкажіть сайт джерело http://yapro.ru Fri Jul 30 2010 12:12:33 GMT+0400 тип даних, що перевіряється, то з'явиться alert() повідомляє, до якого саме полю вказано неправильно.
6. Якщо забудете які бувають типи даних і як їх можна вказувати, то для Вас наступна інформація:
x - не перевіряти дані
w = words - слово
n = numbers - число
d = date – дата часу
wn = withoutNumbers - відсутність цифр у рядку
ww = withoutWords - відсутність букв у рядку
w1 = letter - хоча б одна літера в рядку
n1 = numeral - хоча б одна цифра у рядку
b = blank - пробіл, умова true: присутність хоча б 1 пробілу, включаючи space, tab, form feed, line feed
7. Для введення дат часу, не раджу використовувати календарі, краще використовуйте 3 стандартні SELECT-и. Пов'язано це з тим, що на календар, що з'явився, користувач просто не зверне увагу, або введе дату руками в форматі, що йому сподобався.
8. Іноді, для зручності заповнення TEXTAREA можна використовувати плагін autoResize, який дозволяє автоматично змінювати розмір тексту області під його вміст.
9. При обов'язковому вказівці підлоги не будьте настирливими, перевіряйте заповнення тільки при надсиланні даних (при натисканні на кнопку Отруїти).
На розробку даногоскрипта мене надихнув попередній пост, у якому також дуже багато корисного. Пишіть конструктивні зауваження та пропозиції, із задоволенням дослухаюся до них, до нових зустрічей.