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

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

Вот и я подумал, что пора, поэтому начал писать свой скрипт для работы с формами (на основе 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. При обязательном указании пола не будьте назойливы, проверяйте заполнение только при отправке данных (при клике на кнопку Отравить).

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

Оцени публикацию:
  • 17,81
Оценили человек: 17
Теги : форма валидации, валидация полей, удобство пользования

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • жаль нет возможности проверять поле сразу на 2 вида данных, например проверку паспортных данных пришлось сделать так:

    error = $(this).yaproField("passport_received", {"m":true,"v":"w1"}, "укажите кем выдан");
    if(error == ""){
          error += $(this).yaproField("passport_received", {"m":true,"v":"n1"}, "укажите дату выдачи");
    }

    проверку в момент ввода данных сделал так:

    $("[name=passport_received]").bind("change", function(){
          var error = $("#real_form_2").yaproField(this.name, {"m":true,"v":"w1"}, "укажите кем выдан");
          if(error == ""){
                 $("#real_form_2").yaproField(this.name, {"m":true,"v":"n1"}, "укажите дату выдачи");
          }
    });

    хотя конечно лучше это дело разложить на 2 поля :-)

    php-заметка, проверку даты выдачи (на число) сделал так:

    if(!preg_match('/d/', $_POST['passport_received'])){
          echo 'Вы не указали когда выдан паспорт';
    }

    этим самым проверяю наличие хотя бы одной цифры в строке:-)
    11 ноября 2010, 08:33 коммент полезен : +1 # sunshine
  • спасибо (yea)  хорошая библиотечка, кстати советую прежде чем пускать формы в паблик, всегда тщательно тестировать их заведомо допуская ошибки ввода
    25 января 2011, 12:03 коммент полезен : 0 # Mator (гость)
  • А как проверить поле для ввода время.Например чтоб было так: 23.12.45???Но не с php(это я знаю)
    Спасибо.
    10 февраля 2011, 17:57 коммент полезен : 0 # Мистр Мистр (гость)
  • У меня почему-то скрипт не даёт отправить форму в обработчик....
    04 мая 2011, 12:33 коммент полезен : 0 # Гость
  • Следующий скрипт, к сожалению, проверяет только поле с телефоном и цифровое поле card. В поля с фамилией, именем и отчеством вписывать цифры он так и не помешал. В чём может быть дело?

    fieldPhone("[name=phone_1_new]");
    fieldNumber("[name=card_new]");
    $("[name=family_new]").bind("keyup change", function(){
          $("#client").yaproField(this.name, {"must":true,"valid":"words"} );
    });
    $("[name=name_new]").bind("keyup change", function(){
           $("#client").yaproField(this.name, {"m":true,"v":"w"} );
    });
    $("[name=surname_new]").bind("keyup change", function(){
           $("#client").yaproField(this.name, {"m":true,"v":"w"} );
    });
    15 марта 2013, 19:08 коммент полезен : 0 # Александр13
    • "valid":"words" как и "v":"w" дают вписывать цифры, но при этом выдают ошибку, обратит на это внимание. А чтобы было отсутствие цифр в строке используйте "valid":"wn" или "valid":"withoutNumbers"
      16 марта 2013, 03:05 коммент полезен : 0 # Admin
  • Кажется функция с параметром fieldNumber("[name=user_number]", 123) не правильно работает, потому что заменяет строку на "123".
    02 апреля 2013, 11:39 коммент полезен : +1 # Андрей6
  • Хороший плагин.
    Первая строчка в яндексе по запросу "javascript валидация телефона"

    Но есть замечание:
    В javascript функциях нужно использовать "jQuery" вместо "$", т.к. не работает с MooTools.

    Помогло, если обернуть тело функций в:

    (function($){
       // здесь $ будет действовать как алиас jQuery
    })(jQuery);
    // здесь $ будет доступен для других библиотек
    16 октября 2013, 10:46 коммент полезен : 0 # Андрей9
  • плагин не работает с новыми версиями jquery
    04 ноября 2013, 16:02 коммент полезен : 0 # Николай (гость)
  • Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег "form", что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу http://ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html
    28 января 2015, 22:48 коммент полезен : 0 # Tutanhamon
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » JavaScript »