Автоматическая валидация, исправление и подсказки при заполнении форм

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

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

Вот и я подумал, что пора, поэтому начал писать свой скрипт для работы с формами (на основе jQuery).

Выглядит это так:



Посмотреть пример в отдельном окне »

Скачать исходные файлы скрипта для работы с формами »

А теперь разберемся как это работает, от простого к сложному.

Проверка валидации данных в момент их заполнения.

Поле для ввода номера телефона проходит валидацию через функцию fieldPhone, т.е. мы просто прописали ниже нашей формы javascript-код:

fieldPhone("[name=phone]");

Кроме валидации, телефон будет принимать правильный вид, к примеру введя 9264215497 номер будет преобразован в +7 (926) 421-5497

Поле для ввода цифр проходит валидацию через функцию fieldNumber, т.е. мы просто прописали ниже нашей формы javascript-код:

fieldNumber("[name=user_number]");

Если хотите ограничить максимальное количество вводимых цифр (например 123 символа), это можно сделать указав второй параметр, например так:

fieldNumber("[name=user_number]", 123);

Для дальнейшего понимания, сразу сообщу, что своей форме я добавил id=«myForm»

Проверка обязательности заполнения и подсказка в момент заполнения делается так:

$("[name=user_words]").bind("keyup change", function(){

$("#myForm").yaproField(this.name, "must");

});

А если хотите сделать проверку на присутствие только букв, то напишите так:

$("[name=user_words]").bind("keyup change", function(){

$("#myForm").yaproField(this.name, {"must":true,"valid":"words"} );

});

Также, можно писать сокращенную форму записи для проверки обязательности (вместо must написать m), в проверке валидности (вместо valid написал v), и даже words записать как w:

$("[name=user_words]").bind("keyup change", function(){

$("#myForm").yaproField(this.name, {"m":true,"v":"w"} );

});

Если захотите вывести свою подсказку, то сделать это можно в третьем параметре, например так:

$("[name=email]").bind("keyup change", function(){

$(this).yaproField(this.name, "email", "Пожалуйста, введите E-mail правильно");

});

Бывают моменты, когда подсказку неудобно выводить рядом с элементом заполнения, такой момент продемонстрирован в 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», [«отступ слева», [«отступ сверху»]]]]);

И на последок, если Вы желаете проверять данные также/когда пользователь нажимает кнопку Отправить, то удобно применять конструкцию так:

$("#myForm").submit(function(){// проверка заполнения полей

var error = "";

error += $(this).yaproField("user_words", {"m":true,"v":"w"}, true, -3, 3);

error += $(this).yaproField("email", {"m":true,"v":"e"} );

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");

if(error != ""){

return false;

}

});

Подсказки:

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

$("#myForm INPUT,TEXTAREA,SELECT").mouseover(function(){ this.focus(); });

2. Бываю моменты, когда форме нужно переназначить проверку данных по вводу полей, это удобно сделать так:

$("#myForm").unbind("submit").submit(function() {

// новые условия проверки данных

});

3. Если Вы случайно неправильно объявите форму (ID формы), то появится alert() сообщающий, что форма форма не найдена.

4. Если Вы случайно укажите неправильное название поля, то появится alert() сообщающий, какое именно поле указано неправильно.

5. Если Вы случайно неправильно укажите тип проверяемых данных, то появится alert() сообщающий, к какому именно полю указано неправильно.

6. Если забудете какие бывают типы проверяемых данных и как их можно указывать, то для Вас следующая информация:

x - не проверять данные

w = words - слово

n = numbers - число

d = date - дата времени

p = phone - номер телефона

e = email = mail - электронная почта

wn = withoutNumbers - отсутствие цифр в строке

ww = withoutWords - отсутствие букв в строке

w1 = letter - хотя бы одна буква в строке

n1 = numeral - хотя бы одна цифра в строке

b = blank - пробел, условие true: присутствие хотя бы 1 пробела, включая space, tab, form feed, line feed

7. Для ввода дат времени, советую использовать русифицированный jQuery UI Datepicker.

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