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

Автор: Aport Понедельник, Февраль 2nd, 2015 Нет комментариев

Рубрика: Уроки JavaScript

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

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

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

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

А теперь разберемся как это работает, от простого к сложному. Для начала подключим файл стилей и скрипт с функциями:

<link type=»text/css» rel=»stylesheet» href=»latest.css»>
<script language=»Javascript» type=»text/javascript» src=»latest.js»></script>

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

Поле для ввода номера телефона <input name=»phone»> проходит валидациюсайт источник http://yapro.ru Fri Jul 30 2010 12:12:11 GMT+0400 через функцию fieldPhone, т.е. мы просто прописали ниже нашей формы javascript-код:

fieldPhone(«[name=phone]«);

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

Поле для ввода цифр <input name=»user_number»> проходит валидацию через функцию 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), в проверке валидностисайт источник http://yapro.ru Fri Jul 30 2010 12:12:19 GMT+0400 (вместо 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", ["отступ слева", ["отступ сверху"]]]]);

И на последок, если Вы желаете проверять данные также/когда пользователь нажимаетсайт источник http://yapro.ru Fri Jul 30 2010 12:12:24 GMT+0400 кнопку Отправить, то удобно применять конструкцию так:

var yaproFieldTrim = false;// изначально отменяем автоматическое применение функции trim

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

yaproFieldTrim = true;// включаем автоматическое применение функции trim

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

yaproFieldTrim = false;// отменяем автоматическое применение функции trim

if(error != «»){

srollToFirstError();

return false;

}

});

Обратите внимание, если допущена ошибка, то Вы можете запускать функцию srollToFirstError, которая визуально пролистывает скроллбар окна к первому с ошибкой заполненненному элементу. Если у Вас подключен плагин jQuery scrollTo, то функция сделает пролистывание скроллбара очень красиво.

Подсказки:

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

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

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

$(«#myForm»).unbind(«submit»).submit(function() {

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

});

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 — дата времени

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

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

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

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

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

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

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

7. Для ввода дат времени, не советую использовать календари, лучше используйте 3 стандартных SELECT-а. Связано это с тем, что на появившийся календарь пользователь просто не обратит внимание, либо введет дату руками в понравившемся ему формате.

8. Иногда, для удобства заполнения TEXTAREA можно использовать плагин autoResize, который позволяет автоматически изменять размер textarea под его содержимое.

9. При обязательном указании пола не будьте назойливы, проверяйте заполнение только при отправке данных (при клике на кнопку Отравить).

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты