Проверка формы "на лету"

В этом уроке мы рассмотрим эффект проверки правильности заполения формы "на лету", т.е. без перезагрузки страницы.

demosourse

Шаг 1.

Подключим необходимые скрипты и таблицу стилей формы:

 <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

Если хотите, чтобы форма выглядела, как в нашем примере, то можете подключить еще один стиль (он также есть в исходниках):

 <link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />

Шаг 2.

Далее просто вставляем форму с классом formular (если вы будете использовать свою таблицу стилей, то класс, конечно, может быть другой: тот, который нужен Вам), в параметре action прописываем файл-обработчик (в нашем примере он отсутствует)

<form id="formID" class="formular" method="post" action="#">
</form>

Шаг 3.

В эту форму прописываем необходимые поля, выставляя каждому из них необходимый класс. Например:

<input class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname"/>

Или вот еще один пример, проверяющий правильность введения адреса электронной почты, а также совпадения полей с ней:

	<input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
<input class="validate[required,confirm[email]] text-input" type="text" name="email2"/>

Вот расшифровка подобных классов:

required: Проверка поля
length[0,100] : Между x и x символами
minCheckbox[7] : Максимально позволенное количество чекбоксов
confirm[fieldID] : Совпадает ли с другим полем ( например проверка пароля)
telephone : Проверка телефонного номера
email : Проверка правильности введения адреса электронной почты
onlyNumber : В поле должны быть только цифры
noSpecialCaracters : В поле не должно быть специальных символов
onlyLetter : В поле должны присутствовать только буквы.

Шаг 4.

Если Вам не нравится русификация этого скрипта (русифицировал его я сам), то можете поменять значения команд проверки на свои в файле jquery.validationEngine.js. Но потом обязательно сохраните его в формате UTF-8! Иначе русские символы не будут отображаться!

Вот и все! Спасибо за внимание и пусть Ваши формы всегда заполняют правильно!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.position-absolute.com
Перевел: Сергей Патин
Урок создан: 3 Июня 2009
Просмотров: 116026
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 3 Июня 2009 21:34
    Tegis
    СУПЕЕЕЕР!!!!))) Огромное спасибо) пригодится
  • 3 Июня 2009 22:47
    A_N_R_I
    Спасибо! Будем юзать :)
  • 3 Июня 2009 23:27
    Игорь
    Исправте, источник урока, имя пдреса. У вас www.www.position-absolute.com
  • 4 Июня 2009 00:52
    egorr
    Очень удобно, что проверки можно расширять, прибавляя свои регулярки. Предлагаю следующую редакцию проверки символов "onlyRusssianLetter":{ "regex":"/^[а-яА-Я]+$/", "alertText":"* Только кириллические символы! Мы патриоты или нет!?"}, "onlyLetter":{ "regex":"/^[a-zA-Z]+$/", "alertText":"* Только латиница! Мы европейцы или нет!?"}
  • 4 Июня 2009 09:15
    kickerps
    Обязательно сибе такую поставлю =)
  • 4 Июня 2009 09:35
    Павел
    круто))
  • 5 Июня 2009 10:56
    TRAHOMOTO
    Отлично!! Ато меня уже начинают угнитать SpryAssrts в DW)))
  • 9 Июня 2009 20:04
    xeka
    как изменить положение всплывающих подсказок чтобы они были не справа как в примере а сдвинуть их левее? пытался изменить в validationEngine.jquery.css в классе .formerror - left, top но ничего не меняется.
    • 11 Мая 2011 21:02
      armancho7777777
      В файле jquery.validationEngine.js 102 строка. Задайте отрицательное значение.
  • 3 Июля 2009 23:09
    Shade
    восторг!
  • 15 Июля 2009 09:09
    nekedos
    У меня выскочили баги при настройке, всем элементам (вообще всем) в верстке добавляется top: -128px;, верстка валидная, css для подсказок взял ваш, но косяк где то в скрипте.
  • 15 Июля 2009 09:10
    nekedos
    А может у меня руки не из того места растут))
  • 31 Июля 2009 16:42
    Magnum
    Проверка - что надо, спасибо ! Об один момент только сломал зубы... Пожалуйста подскажите, можно ли сделать поле с проверкой НЕ ОБЯЗАТЕЛЬНЫМ ? Допустим е-мейл -- если ввел - проверило, если оставил пустым, то и хрен с ним... Ибо я в JS не силен, а спросить не у кого.
    • 23 Января 2012 21:22
      krokodil
      Конечно возможно! Пример: "onlyLetter":{ "regex":"/^[A-Za-z ]*$/", // Вместо + поставьте * и получите желаемый результат "alertText":"Letters only!"}
  • 11 Августа 2009 16:55
    UVO_Ujin
    А у меня в IE 7 и 8 выдает ошибку, может кто подсказать в чем дело? Сведения об ошибке на веб-странице Сообщение: 'settings.allrules[...].regex' - есть null или не является объектом Строка: 195 Символ: 4 Код: 0 URI-код: http://localhost/js/jquery.validationEngine.js Сообщение: 'settings.allrules[...].regex' - есть null или не является объектом Строка: 195 Символ: 4 Код: 0 URI-код: http://localhost/js/jquery.validationEngine.js
  • 12 Августа 2009 13:30
    UVO_Ujin
    Все, разобрался.
  • 12 Августа 2009 15:49
    _Zver_
    О_о в исходниках нет index - ного файла.
  • 12 Августа 2009 16:07
    _Zver_
    а как сделать так, чтобы поле проходило проверку только при заполнении. Т.Е. оно может быть пустым. Но если ввести данные, то тогда их проверять?
  • 2 Сентября 2009 21:47
    Максим
    Спасибо! Поставил себе на сайт.
  • 8 Октября 2009 11:57
    SibCoder
    Да, все замечательно и красиво, пока не имеешь дело с ajax, при переходе по ajax-ссылке (страница естественно не перезагружается), все эти красивости (выводимые сообщения) благополучно остаются "висеть" на своем месте :))) Как победить эту напасть? Кто знает? Буду признателен...
  • 17 Октября 2009 17:46
    AdrenalinHunter
    2SibCoder +1 А (Специально для * В комментарии нет ни одной русской буквы. Не принимается!)
  • 25 Октября 2009 17:52
    НеБот
    В комментарии нет ни одной русской буквы. Не принимается!
  • 4 Ноября 2009 13:22
    scorpionchik
    а как сделать чтоб можно было англ буквы вводить???
  • 4 Ноября 2009 13:24
    scorpionchik
    а... всё ясно... буквы поменять! спасибо! прикольно!!!
  • 13 Ноября 2009 16:58
    Paramoun
    все это хорошо но нету проверки на list-menu!!!
  • 8 Февраля 2010 08:50
    wOrker
    ВОт решил поставить этот скрипт и нашел неприятные особенности, в модальном окне (например добавление коммента) подсказка не всплывает, сначала не понял в чем дело, потом сделал тестовую страницу на сайте с одним полем, оказалось, что когда браузер не развернут на всю страницу а занимает часть экрана скрипт неверно считает положение поля, в итоге пропадает куда-то за пределы экрана, и с моим модальном окном использование этого скрипта бесмыссленно. Да и с обычными страницами баг не приятный.
  • 10 Февраля 2010 18:04
    scorpionchik
    Прогеры, у меня проблема! не понимаю, но... у меня глюк с проверкой e-mail ввожу test@test и оно показывает, что все правильно! но это же не так!!! как сделать нормальную проверку???????
  • 24 Февраля 2010 23:56
    Сергей
    wOrker Все работает в Мозиле пробовал. У меня просьба как сделать чтобы он проверял есть ли в базе логин или нет.
  • 26 Февраля 2010 16:23
    Almaron
    to _Zver_ Не надо в классе прописывать required и все. Тогда не будет ругаться на пустое поле. У меня вопрос такой: надо при нажатии на кнопку submit сначала проверить заполнение 1го поля и выполнить некое действие в зависимости от результата, а затем уже прогонять обычную проверку. можно ли это как-то устроить?
  • 26 Февраля 2010 17:31
    Almaron
    Не работает скрипт. Вот адрес формы: http://sistemasbal.createfuture.ru/form2.php Может мне кто-нибудь подсказать, что я не так делаю?
  • 17 Марта 2010 12:06
    Kohey
    Подскажите как сделать связь с MySQL. Например проверка логина (занят или нет)?
  • 27 Марта 2010 17:44
    Miheros
    У меня проблема! я не понимаю, у меня проблема с проверкой First name и Last name ошибку выводит только одну, еще и ту какой импут стоит последним как сделать нормальную проверку???
  • 27 Марта 2010 17:46
    Miheros
    ааааа, ещо немогу никак убрать тот плавующий стиль после нажатия submit
  • 29 Апреля 2010 22:16
    Zefss
    Супер! Но у меня вопрос? Как сделать так, чтобы проверяло есть ли в базе то, что я ввожу в текстбокс?? Например у меня есть таблица со счетами (допустим: 112, 242, 313 и т.д.) И когда я ввожу какой-либо счёт, мне нужно проверить если есть такой счёт в таблице! Помогите кто может!
  • 10 Мая 2010 22:36
    MrJenika
    При использовании в связке с prototype проверка не работает,кто-то знает решение?
  • 18 Мая 2010 06:43
    Deonis
    [b]Zefss[/b], могу тебя огорчить, но для того, чтоб шла проверка воодимого в поля типа input , а ОСОБЕННО налету, тебе придеться или же написать пользовательскую функцию самому, или же использовать стандартные способы PHP+MySQL.
  • 9 Августа 2010 16:40
    Василий
    У меня не проверяет выбран select или нет. Пишу: <select class='validate[required]' name='city' tabindex='1'> <option value=''>Выберите город</option> <option value='1'>Москва</option> <option value='2'>Сочи</option> <option value='3'>Питер</option> </select> и никакой валидации! В чем косяк??? Подскажите!
  • 9 Августа 2010 16:41
    Василий
    К предыдущему комменту: Слэши автоматически добавились
  • 24 Августа 2010 03:28
    olexandr_b
    У меня проверяет только первое поле и все. хотя параметры проверки забиты в 5 полей. Что может быть не так? Тегы form на местах.
  • 24 Августа 2010 03:34
    olexandr_b
    разобрался... там нужно было тег <form> сразу после body поставить, хотя вообще страннно - тег форм охватывал все поля... Вобщем великому Jquery что не понравилось ))
  • 3 Октября 2010 17:50
    link
    подскажите у меня какаето борода ! ставлю все нормально но вот если жму отправить все каракули всеравно проходят...что делать?
    • 23 Января 2011 18:13
      GPV091
      Такая же проблема. Решил её как-нибудь?
  • 29 Октября 2010 13:47
    dikayalizzz
    ДОброе утро! У меня тоже не проверяет, выбран ли option из select. Подскажите, пожалуйста, что с этим можно сделать?
  • 21 Декабря 2010 17:49
    Александр Овсянников
    Готов расцеловать автора!!!! СПАСИБО!! ТО ЧТО Я ИСКал! P.S. будет неплохо сделать урок, к примеру, чтобы выполнить действие необходимо оплатить его сначала, или форму для ввода инвайтов...очень нужно
  • 26 Декабря 2010 16:45
    luter1984
    После того как поля формы были верно заполнены, как сообщить пользователю, что данные отправлены и отослать письмо администратору и пользователю...
    • 6 Февраля 2011 15:46
      SibCoder
      Luter1984, написать тебе не смог т.к. пишет при отправке "Многократное повторение одного и того же символа в строке запрещено"! Бред какой-то! :-(
  • 12 Января 2011 11:08
    Rinat
    Классный эффект!
  • 26 Января 2011 02:48
    SibCoder
    Ребят! Подскажите пожалуйста, как проверить прошла ли форма валидацию? Что-то типа:
    if(форма.прошла.валидацию) {alert('Cool!');}
    
    Не могу найти, что за функция отвечает за это!
  • 26 Января 2011 07:31
    SibCoder
    Вопрос снят :)
    • 1 Февраля 2011 21:57
      bobrina
      У меня такая проблемка: когда я не правильно ввожу информацию выходит сообщение, но все исправив сообщение все так же ВИСИТ!!! Как это устранить??? Помогите.
  • 2 Февраля 2011 20:52
    bobrina
    Ну что поможет кто?
    • 6 Февраля 2011 12:51
      SibCoder
      Над каким элементом остается сообщение? Над radio или над всей формой?:)
  • 9 Сентября 2011 20:35
    Almaron
    Чего-то в паре с jquery 1.6.2 работать не хочет.. jquery грузится с гугловских репозиториев, может в этом проблема? Хотя странно, раньше-то ее не было никогда.
  • 13 Сентября 2011 13:06
    kolya7774
    А у меня вообще не работает почему то! и в чем проблема не могу понять
    • 14 Сентября 2011 16:20
      yurfact
      Аналогично. Все подключено и протестировано, но плагин не пашет :(
    • 14 Сентября 2011 21:53
      yurfact
      Ну я и плуг:). Чтобы валидатор работал каждому элементу формы нужно обязательно присвоить идентификатор css. Для таких как я: 1. Работает:
      <input class="validate[required] text-input" name="input" type="text" id="name_input">
      2. Не работает:
      <input class="validate[required] text-input" name="input" type="text">
      • 16 Сентября 2011 20:50
        kolya7774
        у меня чето так и не вышло
  • 25 Октября 2011 18:17
    tlustenko
    слишком много всяких скриптов и стилей. я наоборот стремлюсь чтобы этого хлама меньше было. - постоянно конфликтуют друг с другом.
  • 17 Ноября 2011 21:19
    TOIIOP
    На сайте разработчика новая версия есть, там и проверка на лету (ajax) и нормально отключающаяся проверка на обязательное поле и с почтой test@test глюк исправлен. ЧИТАЙТЕ ИНСТРУКЦИЮ ПО УСТАНОВКЕ.
  • 29 Ноября 2011 21:02
    ladan54493
    почему в IE и мозилле jquery никак не реагирует? В опере все нормально
  • 29 Ноября 2011 23:00
    ladan54493
    все работает, мои косяки. Автору огромное спасибо, отличный плагин :)
  • 23 Декабря 2011 14:07
    romeno
    Здравствуйте. Очень полезный скрипт, использую его вовсех формах, но столкнулся с проблемой. У меня форма состоит из: (по порядку) текстовый интпут, затем чекбокс, затем еще один текстовый интпут. По клику чекбокса второй инпут появляется или исчезает. Проблема в том, что если поставить курсор в инпут, который проверяется этим скриптом и ничего не вписать, а затем попробовать активировать чекбокс, то срабатывает функция проверки инпута, но не работает функция скрытия второго инпута (только при первом клике). Вторая проблема в том, что если сначала вставить курсор в инпут (тот который скрывается по клику), а потом попробовать скрыть его, то выскакивает окошко предупреждения (данного скрипта, о неправильности введенных данных), и остается даже после скрытия инпута, котырый естественно пустой, ведь если он скрыт - значит он не нужен. Помогите пожалуйста решить такие проблемы.
  • 18 Февраля 2012 19:31
    sheygam_greg
    Как при отправке формы сделать чтобы все содержимое принималось как текст, теги и пхп <strong>test</strong>
  • 18 Февраля 2012 19:32
    sheygam_greg
    Так как реализовано в комментариях на ruseller.com
  • 18 Февраля 2012 21:37
    sheygam_greg
    Вопрос закрыт
  • 14 Марта 2012 16:21
    kowalsky
    Подскажите, а как проверять выбрано ли в <select>?
  • 14 Марта 2012 17:47
    kowalsky
    Нашел как проверять <select>, делюсь: разница в присвоенном классе, так выглядит класс для проверки select class="validate[required,custom[lnamtur],length[0,100]] select-input", а так выглядит класс для проверки текстового поля: class="validate[required,custom[fnamtur],length[0,100]] text-input" Как вы можете видеть разница в том, что в конце класса для select указываем select-input, а для текстовых полей указываем text-input. lnamtur - это имя сообщения в файле jquery.validationEngine.js которое будет показываться юзеру, если поле не заполнено, или select не выбран.
    • 14 Апреля 2012 01:21
      alex1984
      у меня очень странная ошибка, ставлю 3-ий select на проверку при любом выборе выдает что типа не выбрано это ei а в мозиле все работает
  • 18 Апреля 2012 17:30
    artarx
    Ребят подскажите как сделать,что бы в поле с цифрами можно было вводить дробные числа с запятой, а то отказывает.
  • 27 Апреля 2012 22:44
    celiver
    привет, как можно сделать проверку из бд для полей, куда нужно писать запросы и т.д.
  • 27 Апреля 2012 23:07
    kushiy
    Когда я указываю обработчик формы action="mailto:свой email", то письмо не приходит. Куда нужно вставлять свое мыло?
  • 3 Июня 2012 09:54
    Erkul
    Подскажите пожалуйста, какое регулярное выражение нужно составить, для ввода ФИО. Пробовал использовать \s, но у меня не получилось.
  • 3 Июня 2012 10:33
    Erkul
    Нашел решение
    /[a-zA-Zа-яА-Я]+\\s+[a-zA-Zа-яА-Я]+\\s+[a-zA-Zа-яА-Я]+$/
    • 16 Июня 2013 19:45
      neformatnoe
      не помогает ни этот вариант не следующий, просто скрипт перестает отрабатывать... Кто нибудь решил проблему с пробелами???
  • 3 Июня 2012 10:58
    Erkul
    Есть еще такой вариант
    /^([а-яА-Я]+(\\s)?){1,3}$/
  • 13 Сентября 2012 02:34
    dimple
    А как связаться с бд mysql, чтобы вставить туда данные после проверки?
  • 13 Сентября 2012 04:57
    dimple
    ой, извиняюсь за глупый вопрос)
  • 9 Декабря 2012 22:44
    Swagg
    нужно чтоб в поле было как минимум 4 символа, что дописать?
  • 22 Марта 2013 07:52
    zoOmer
    Подскажите как сделать свои дополнительные поля?
  • 22 Марта 2013 07:52
    zoOmer
    И еще вопрос если в селекторе есть 3 пункта выбора и пробел "-" т.е так
    <option value="" selected>-</option>
    Как сделать алерт на то что выберите пункт! Заранее спасибо!
  • 7 Апреля 2013 09:18
    Duke
    А как сделать проверку даты?
  • 17 Апреля 2013 19:18
    Maximru34
    Ребят, а кто подскажет, как сделать проверку на SELECT-ах!? :(((
  • 14 Мая 2013 15:09
    LinuX_UseR
    У меня проблемма в поле фамилия и имя если пробел то пишет должны быть только русские буквы как внести пробел в исключение?
  • 20 Ноября 2013 23:29
    artarx
    Круто, только помогите решить проблему: При неправильном заполнении формы при нажатии кнопки "Отправить" у меня форма съезжает вниз, а ошибки остаются висеть в воздухе, сдвинутыми вверх !
    • 20 Марта 2014 15:52
      babets
      artarx у меня та же проблема. Вы нашли решение? Если да, подскажите пожалуйста, уже третий день ищу, все скрипты перерыл, но не нашел. Спасибо!
  • 7 Ноября 2014 14:28
    Alexey_Korolev
    У меня такая проблема: Если расположить элементы так <div> <span>Radio Groupe : <br/></span> <span>radio 1: </span> <input class="validate[required] radio" type="radio" name="group0" id="radio1" value="5"/><Br> <span>radio 2: </span> <input class="validate[required] radio" type="radio" name="group0" id="radio2" value="3"/><Br> <span>radio 3: </span> <input class="validate[required] radio" type="radio" name="group0" id="radio3" value="9"/><Br> </div> тогда сообщения двигаются вниз пока не дойдет до последнего элемента group0. как сделать чтобы сообщение осталось на первом элементе?
  • 24 Декабря 2014 15:44
    Сергей Вирченко
    У меня форма в всплывающем окне popup, скажите по какой причине в ней может не работать?
  • 25 Января 2015 01:30
    LanaT
    А где взять файл обработчик?
  • 10 Декабря 2015 17:27
    shkur
    Проверка на лету хорошая идея. Но вы не осветили такой момент: а что если у посетителя отключен js? Я пока не нашёл ни одного полноценного обработчика со всеми пирогами. Что понравилось: tectite.com здоровенный скрипт обработчик с поддержкой многостаничных форм. JS там отсутствует. http://blog.kplus.pro/dev/mailsend-ajax-php-form.html хорошая связка. обратить внимание, что в php должен иметь модуль jsonwrapper. Я Подключал так: require $_SERVER['DOCUMENT_ROOT'].'/jsonwrapper/jsonwrapper.php'; //подключаем библиотеку jsonwrapper, которая подключается или нет в зависимости от версии php. Если в php есть функции для работы с json, то она не подключается. Если нет, то подключается. Кстати php 5.5 json отсутствует ;) // подключаем через абсолютный путь, чтобы при перемещении файла в другой каталог не искать где и что править. http://webware.biz/?p=4524 тут неплохие мысли по поводу надоедливой капчи в форме обратной связи. P.S. сорри за неоформленный пост. Тут нет спойлеров :( Может быть создать публичный проект на гитхабе где любой желающий сможет дополнять проект? Сделаем что-то суперпуперское общими усилиями!
  • 3 Февраля 2016 08:07
    mmvova
    подскажите почему подключаемый файл js/jquery.js нельзя заменить на jquery последней версии скаченный с официального сайта? в вашем файле не чистый jquery, добавлен еще код?
  • 9 Марта 2016 15:42
    zziger
    Uncaught TypeError: loadValidation is not a function
    (anonymous function)	@	jquery.validationEngine.js:76
    m.event.dispatch	@	jquery.js:4
    r.handle	@	jquery.js:4
    Помогите пожалуйста.
  • 9 Марта 2016 18:58
    zziger
    Всё, разобрался
^ Наверх ^