Блог Web-мастера

jQuery, php, CSS и немножко SEO

« Холивар - горячие споры!
3d приложения в WEB »

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

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

form_login

Проверка формы для комментариев с помощью плагина jQuery jquery.validation_form.js

В продолжение темы “проверка паролей на javascript” решил сделать плагин проверки форм для самой распространенной javascript библиотеки - jQuery.

Подключение плагина

Плагин легко подключается и настраивается.


<!-- Подключаем скрипт -->
<script type="text/javascript" src="../js/jquery.validation_form.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<!-- Вызываем проверку формы -->
<script type="text/javascript">
$(document).ready(function()
{

var options_comment = {
validation_form: ".comment"   //class формы, которую будем проверять
}
$().validateThis(options_comment);

}
);
</script>
<form name="comment" class="comment" action="" method="post">
<p>Имя</p>
<input type="text" class="text important" value="Send" valNull="Введите login"><br />
<p>E-mail</p>
<input type="text" class="text email important" value="" valNull="Введите email"> <br />
<p>Сайт</p>
<input type="text" class="text" value="" valNull="http://sample.site"> <br />
<p>Текст комментария</p>
<textarea name="Name" class="text important" rows=5 cols=20 wrap="on"></textarea> <br />
<input type="submit" class="submit"  value="Send">
</form>

Обращение к элементам идет через атрибут “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 - файле.

Теперь рассмотрим поподробнее на примере

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

  1. Форме зададим класс “comment” (class=”comment”)
  2. Полю для ввода имени зададим классы “text important” (class=”text important”).  Класс text указывает, что это поле необходимо проверять, а класс important - означает, что это поле обязательно для заполнения.
  3. Полю для ввода e-mail’a зададим классы “text email important” (class=”text email important”).  В этом поле добавился класс email. Он означает, что это поле необходимо проверять на валидность e-mail’a.
  4. Поле сайт не является обязательным для заполнения, поэтому у него только класс “text” (class=”text”).
  5. Поле с текстом комментария обязательно для заполнения, поэтому ему присваиваем классы “text important” (class=”text important”) .
  6. Кнопке submit ставим класс “submit” (class=”submit”), чтобы сделать её не активной по-умолчанию.

В итоге у нас получился следующий код:


<form name="comment" class="comment" action="" method="post">
<p>Имя</p>
<input type="text" class="text important" value="Send" valNull="Введите имя">
<p>E-mail</p>
<input type="text"   value="" valNull="Введите email">
<p>Сайт</p>
<input type="text" class="text" value="" valNull="http://">
<p>Текст комментария</p>
<textarea name="Name" class="text important" rows=5 cols=20 wrap="on"></textarea>
<input type="submit" class="submit"  value="Оставить комментарий">
</form>

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

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

Если Вам понравилась эта статья,
подпишитесь на RSS !

Метки: , , ,

Эта статья была опубликована Понедельник, апреля 20, 2009 в 19:51. Категория: javascript. Вы можете следить за комментариями к этой статье через RSS 2.0 фид. Вы можете оставить комментарий, или послать trackback на Ваш сайт.

33 Комментариев к “Проверка форм на jQuery”

  1. tayleraleks написал:
    мая 28, 2009 at 16:16

    Спасибо :) правда чуть чуть я переделал. Но все очень здорово :)

  2. namez написал:
    сентября 11, 2009 at 11:42

    Поставил на сайт - сразу пошли жаболы на то что кнопка submit становится активной не после последнего заполненого поля. Надо догадаться нажать вне поля куда-нидудь или же на другое поле….
    Какой-то странный баг. Половина пользователей не смогло зарегистрироваться.

    Как решить данную неприятность? =)

    как пример http://www.goldblog.com.ua/wp-content/uploads/validation_form_jquery/index.php?form=form_comment.php

    вводим последнее поле - текст и надо догадаться тыкнуть еще куданибудь после заполнения чтобы кнопка все-таки стала активной!

  3. Yura goldblog написал:
    сентября 14, 2009 at 11:20

    Можно в исходнике плагина изменить событие (вместо onchange на изменение текстовых полей поставить onkeyup)

  4. namez написал:
    сентября 14, 2009 at 12:08

    Юрий спасибо за отклик! Пытаюсь найти в
    http://www.goldblog.com.ua/wp-content/uploads/validation_form_jquery/jquery.validation_form.js этот момент и что-то не понимаю в итоге где же там сделать правку? crtl+f на onchange не дал результатов…

    Помогите!

  5. Yura goldblog написал:
    сентября 14, 2009 at 12:58

    Извиняюсь, не “onchange”, а “blur” необходимо изменить на “keyup”.

  6. namez написал:
    сентября 14, 2009 at 13:19

    Юрий спасибо! Теперь на радость ваш скриптец!
    Единственное встал вопрос такого характера, вдруг подскажите: допустим форма регистрации пользователя (собственно пример реальный у меня на сайте), после заполнения и отправки формы на сервер - на следуюшей странице если логин существует, выводится ошибка сообщающая об этом и ниже форма с заполненными полями.

    Так вот в таком случае приходится снова перебирать-заполнять (то есть не смотря на заполненность) обязательные поля чтобы кнопка submit стала активной.. 8(

    Как думаете такой ньюанс можно решить?
    Cпасибо заранее за помощь!

  7. Yura goldblog написал:
    сентября 14, 2009 at 13:30

    В поля в value подставлять полученные переменные. Например:
    <input type="text" name="email" value="<?php echo @$_REQUEST["email"]; ?>”>

  8. namez написал:
    сентября 15, 2009 at 10:30

    Юрий если я правильно вас понял то:

    Шаблоны системы построены на xsl(данные берутся из xml), вот кусок поля к примеру

    То есть переменные вставляются, как и писал выше поля на следующей странице заполнены но кнопка submit все равно не активна…

    Может ваш плагин не переберает пар

  9. namez написал:
    сентября 15, 2009 at 10:56

    не получается вставить код -)) в общем : value=”{site_users_phone}”

  10. Yura goldblog написал:
    сентября 15, 2009 at 17:34

    Я пишу сайты на PHP и в value поля вставляю переменную PHP, полученную из формы методом GET или POST, знак @ защищает от появления ошибок при отсутствии переменной, пишем:
    echo '< input type="text" name="email" value="'.@$_REQUEST["email"].’”>’;

  11. namez написал:
    сентября 16, 2009 at 9:21

    Ясно… в общем переменные у меня вставлялись и так, другое дело важно ли как форма обрабатывается? движок hostcms.ru

    Если я вижу заполненное value у поля то значит оно собственно вставилось, а скрипт все равно думает что поле не заполнено -))
    Я и пытаюсь понять в чем же причина…

  12. Олег написал:
    ноября 12, 2009 at 21:38

    Поставил скрипт, вроде все ок, но :
    1. Неработает проверка радиобуттона
    2. Можно ли както упростить класс чтобы он проверял просто текстовые поля, емайлы и радиобуттоны и не по классу а по id или name, без вывода текста ошибок, ну или делал поля красными

  13. Yura goldblog написал:
    ноября 12, 2009 at 21:46

    Можно будет сделать, в следующем релизе плагина учту Ваши пожелания.

  14. Олег написал:
    ноября 12, 2009 at 23:09

    Юра, вот сократил класс в 3 раза http://uploadbox.com/files/fc9ec0687a/

    Оставил там только проверку текста, радио(почемуто досихпор неработает) и емайла. Также убрал вывод всех ошибок и дополнительных тегов для их отображения. Доступ к кнопке сделал по id ()… Если другим елементам делаю доступ по id то перестает работать… Моих знаний недостаточно чтобы разобраться… Помогите решить проблему, если несложно)

  15. Виталий написал:
    ноября 23, 2009 at 14:59

    У меня на сайте есть партнерская программа и форма, которую пользователь партнерки должен заполнить. Можно некоторые поля сделать обязательными к заполнению? Вот код:


    Регистрация в партнёрской программе

    Сведения о партнёре

    Ваше имя:
    <input name="uname" type="text" class="text" value="validation->uname?>">

    Страна:
    validation->strana);?>

    Город:
    <input name="gorod" type="text" class="text" value="validation->gorod?>">

    Ваш e-mail:
    <input name="email" type="text" class="text" value="validation->email?>">

    URL-сайта (если есть):
    <input name="url" type="text" class="text" value="validation->url?>">

    Направление деятельности:
    <input name="about" type="text" class="text" value="validation->about?>">

    Подписчиков (если есть):
    <input name="rass" type="text" class="numeric" value="validation->rass?>">

    На каком сайте Вы прочитали рекламу о книге:
    <input name="otkuda" type="text" class="text" value="validation->otkuda?>">

    Объясню для чего мне это надо. В общем, мне нужна информация, с какого сайта человек перешел на мой сайт (т.е. меня интересует только последнее поле), т.к. я сотрудничаю со многими сайтами и по договору с ними должен отчислять им процент от продаж. Но, не всегда человек заполняет это поле.

  16. Yura goldblog написал:
    ноября 23, 2009 at 15:23

    Назначьте полю, которое должно быть обязательно заполненным класс important ( class=”text important”)

  17. sa написал:
    декабря 5, 2009 at 0:27

    немного сыровато а так норм ) вполне юзабельно получилось,

  18. натяжные потолки написал:
    января 27, 2010 at 16:16

    натяжные потолки петербург Третьяковская натяжные потолки http://www.vip-potolok.ru метро Третьяковская натяжные потолки петербург

  19. coderun написал:
    января 31, 2010 at 0:53

    у меня постоянно вылазит ошибка $().viladate is undefined
    я понимаю, что она означает, но не пойму почему?? Все подключено, проверили в Firebug и jQuery и ваш плагин.

  20. coderun написал:
    февраля 6, 2010 at 0:31

    Еще один баг: после первой проверки, если все ок, потом изменить данные на неправильные все остается по прежнему активно. Как можно исправить?

  21. Владимир написал:
    марта 18, 2010 at 14:04

    Подскажите, как проверить поле select?

  22. Yura goldblog написал:
    марта 18, 2010 at 14:46

    поле select проверяется аналогично полю text

  23. Владимир написал:
    марта 24, 2010 at 4:06

    пробовал и как текст и как checkbox - не работает

  24. Yura goldblog написал:
    марта 24, 2010 at 10:17

    Владимир, а на что вы проверяете поле select? Если оно должно быть не пустым, то первый option должен иметь value=”", остальные уже с нужными значениями, тогда метод проверки совпадет с text.

  25. Slava написал:
    апреля 24, 2010 at 19:42

    Отличный плагин

  26. денис написал:
    мая 29, 2010 at 10:06

    как сделать чтобы для неактивной кнопки применялся класс, а если кнопка становится активной этот класс убирается?

  27. Yura goldblog написал:
    мая 31, 2010 at 8:31

    Денис, посмотрите статью http://goldblog.com.ua/2009/04/proverka-form-na-jquery/

    Через CSS можно реализовать, не перегружая код лишними классами:

    input /*активный элемент*/
    {
    color:#999;
    }
    input:disabled /*неактивный элемент*/
    {
    color:#ccc;
    }

  28. Виталий написал:
    июля 8, 2010 at 0:52

    Благодарю!

  29. ярослав написал:
    октября 23, 2010 at 10:25

    спасибо,понравилось.

  30. Перспективный блоггер написал:
    октября 28, 2010 at 4:37

    Уж только-только я обрадовался, насколько классный и простой нашелся скриптец, когда тут же была обнаружена подложенная свинья: скрипт не работает, если у вас на странице больше 1 формы!!!! Одна из них, даже если поменять классы (про css трах кода при этом я умолчу), тупо не будет сабмититься - сабмит будет задизейбленым :( . Автор, поддержку нескольких форм по-быстренькому реализовать можешь? Чтобы параметры передавались также - по классу формы, а вот вызов каждой формы на странице осуществлялся через id формы. Т.е. сейчас у тебя так:
    $().validateThis(options);
    А для нескольких формы сделать, скажем, так:
    $().validateThis(’formId1′, options);
    $().validateThis(’formId2′, options);
    $().validateThis(’formId3′, options);

    А еще лучше и опции каждой свои чтобы можно было задавать, но это уже опционально… Ну, и да, среди багов можно отметить, что если валидация формы пройдена (сабмит стал активным), и мы берем и, удаляя часть е-мейла (валидацию ламаем), то сабмит не дизейблится заново… Кста! Забыл сказать, что в ИЕ6 вообще не работает смена фонов на inputa’x, что очень огорчило, неужели так сложно было добить, jquery вроде бы кроссбраузерная ведь… И еще здорово было бы вынести в коде валидацию textarea отдельным куском, чтобы в этом курсе для текстареи можно было подправить что-нибудь. Это был бы уже верх блаженства :)

  31. alex написал:
    ноября 29, 2011 at 19:54

    До этого плагина стоял вот этот http://ruseller.com/lessons.php?rub=32&id=246 Но оказалось, что в мозилле и ИЕ не пашет jquery почему-то. Ваш плагин работает, правда баги есть, но не беда, главное что работает во всех браузерах :)

  32. Настя написал:
    марта 10, 2012 at 22:47

    Прекрасный материал.

  33. Tutanhamon написал:
    января 29, 2015 at 2:04

    Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег “form”, что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу http://ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html

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

Я не робот.