Проверка полей с помощью JQuery

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

В этом уроке хотел бы показать один из способов как можно это делать используя плагин JQuery Validation.

Данный плагин проверяет поля формы на соответствие правилам и показывает ошибки пользователя динамически.

Снял для Вас видеоурок:

Выставляйте качество 1080р.

Скачать дополнительные материалы

Давайте рассмотрим простой пример:

Подключаем нужные файлы:

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/myscripts.js"></script>

Подключаем библиотеку JQuery, плагин JQuery Validation и файл, где мы будем писать свой код для проверки.

Вот HTML код с нашем формой:

</pre>
<form id="loginform" action="" method="post">
Ваш логин:

<input type="text" name="login" />

Ваш пароль:

<input type="password" name="pswd" />

<input type="submit" name="enter" value="Войти" /></form>

И вот файл myscripts.js с нашим кодом проверки форм:

$(document).ready(function(){

    $("#loginform").validate({

       rules:{

            login:{
                required: true,
                minlength: 4,
                maxlength: 16,
            },

            pswd:{
                required: true,
                minlength: 6,
                maxlength: 16,
            },
       },

       messages:{

            login:{
                required: "Это поле обязательно для заполнения",
                minlength: "Логин должен быть минимум 4 символа",
                maxlength: "Максимальное число символо - 16",
            },

            pswd:{
                required: "Это поле обязательно для заполнения",
                minlength: "Пароль должен быть минимум 6 символа",
                maxlength: "Пароль должен быть максимум 16 символов",
            },

       }

    });

});

Чтобы менять внешний вид сообщений об ошибке, нужно в файле CSS работать с классом .error

Например:

.error{
  color: red;
}

Список правил:

  • required — поле обязательное для заполнения (true или false)
  • remote — указывается файл для проверки поля (например: check.php)
  • email — проверяет корректность e-mail адреса (true или false)
  • url — проверяет корректность url адреса (true или false)
  • date — проверка корректности даты (true или false)
  • dateISO — проверка корректности даты ISO (true или false)
  • number — проверка на число (true или false)
  • digits — только цифры (true или false)
  • creditcard — корректность номера кредитной карты (true или false)
  • equalTo — равное чему-то (например другому полю equalTo:»#pswd»)
  • accept — проверка на правильное расширение (accept: «xls|csv»)
  • maxlength — максимальное кол-во символов (число)
  • minlength — минимальное кол-во символов (число)
  • rangelength — кол-во символов от скольки и до скольки (rangelength: [2, 6])
  • range — число должно быть в диапазоне от и до (range: [13, 23])
  • max — максимальное значение числа (22)
  • min — минимальное значение числа (11)

Документация по плагину тут.

Если урок Вам был полезен, нажмите на любую кнопку ниже— буду благодарен :) Всем удачи и следите за ходом событий;)

Комменты

  • Здравствуйте.
    Очень хороший скрипт. Не могу разобраться, как запретить вводить в поле знаки . и , (точка и запятая)?
    Смысл такой, в поле нужно ввести любое слово и число, но запретить чтобы поле содержало точку или запятую.
    Подскажите пожалуйста.

  • Подскажите как увеличить кол-во полей я добавляю поле здесь validation.js и index.html и оно не работает

  • Temurbek Raxmonberganov: 21-01-2016 в 15:57

    Огромное спасибооооооооооооо!!!!!!!!!!!

  • Подскажите, пожалуйта! Как скормить номера Украины. Можно расширять класс, но каким файлом?

  • Спасибо !!!
    Очень помогло

  • Константин: 25-02-2015 в 18:02

    А как запретить вводить цифры и всех символов! и оставить ввод только букв

  • У меня после всех проверок на форме остается novalidate=»novalidate», что не дает нажатию кнопки submit, что делать?

  • БОЛЬШОЕ СПАСИБО ЧТО СНЯЛИ ТАКИЕ КЛАССНЫЕ ВИДЕО УРОКИ ! Я УЧУСЬ ТОЛЬКО ПО ВАШИМ КУРСАМ И УРОКАМ!!!

  • Спасибо!!!

  • Здравствуйте Дмитрий! А как мне проверить строку через регулярные выражения. Мне нужно в одном input проверить текст на наличие только английских букв и символов. Я не понял как включить такую проверку? Как подключить регулярки?

    • Качаешь плагин jquery.validate.js , там найди файл additional-methods.min.js, подключи его на сайт.
      Дальше добавь инпут, который надо проверить, к примеру так:
      phone: {
      required: true,
      minlength: 4,
      pattern: ‘(/+)?[0-9]+$’
      },

      И в дальнейшем сообщение
      phone: {
      required: » Введите номер в формате …»,
      minlength: » Слишком короткий телефон»,
      pattern: » Введите телефон в правильном формате»
      },

  • Спасибо!
    насчет валидации email: в новой версии плагина почему то валиден email без точки и домена, например: «oleg@website»

    пришлось в файле jquery.validate.js менять код на старый

  • Здравствуйте. Подскажите как подключить валидацию если имена полей заданы ввиде массива, например «jform[contact_email]»

  • У меня проблема, у меня форма отправляеться через событие onclick(), без перезагрузки страницы и метод jquery.validation срабатывает только один раз, а потом пропускает мои некорректные данные. Что мне делать? Спасибо.

  • Это, то, что я искал !!!

  • Крутая статья 5+

  • Доброго времени суток!
    Давно уже использую данный метод валидации, только одной фишки в нем не хватает, может кто знает как сравнить числовые значения полей между собой? Пробовал через max и min, т.е. например, минимальное значение поля1 = полю2, но так почему-то не получается, если же указываешь в свойстве min конкретное число (1,2,3…), то оно работает, а вот переменную брать не хочет.

    • Дмитрий Валак: 05-01-2014 в 11:59

      Здравствуйте. А equalTo Вам не подходит?

      • К сожалению нет. Задача стоит такая, что нужно проверить, например, что сумма двух полей меньше или равна значению третьего поля. Пробовал сделать hidden, значение которого через JS получает как раз таки из суммы двух полей и потом это скрытое поле сравнивать со значением третьего поля (через свойство min третьего поля), но, как выяснилось, это свойство не может быть динамическим.

  • Спасибо. Все супер! понятно и приятно слушать!

  • Да, статья действительно очень полезное, единственное в чем не смог разобраться это с «remote:» подключаю php-файл как по инструкции но никаких действий не происходит то есть речь о проверке на вес и расширение файла

  • Спасибо, Дмитрий. Давно хотел добавить такую возможность к своим формам.

  • Спасибо за такой урок, все просто и доступно. Подскажите, как можно проверить поле на латинские символы. Только латиница.

  • 02-06-2013 | igor

    а как сделать чтоб сообщение об ошибке выдавало в одной из ячеек таблицы и вместо букв у меня вопросы хотя в загаловке стоит utf-8

    Игорь, это бывает тогда, когда файл или файлы РНР сохранены не в стандарте UTF-8.
    Не только в заголовке должен стоять «utf-8″, но и сами файлы должны быть сохранены в стандарте UTF-8.

    • Не понял, а разве нельзя применить кодировку windows-1251? Походу, в ней ничего не работает… просто если написать даже проверочную фразу в этой кодировке…

  • и в ie не работает

  • а как сделать чтоб сообщение об ошибке выдавало в одной из ячеек таблицы и вместо букв у меня вопросы хотя в загаловке стоит utf-8

  • Спасибо, очень удобно и функционально. Избавляет от большого кол-ва дополнительных телодвижений, вот если бы ещё можно было в строке выводимой ошибки вставлять jquery код , чтобы налету менять css этого сообщения — вообще бы цены не было ))

  • Спасибо за урок!!
    на phpDesigner перенос строки можно вставлять с помощью комбинацией клавиш SHIFT+ENTER

  • Большое спасибо! Но почему-то конфликтует с капчей… Капча перестала отображаться…

  • Здравствуйте, а как сделать проверку не двух полей, а четырёх или даже пяти? Я написал вот такой код http://code.presebook.ru/1126/, но он не проверяет… Помогите!

  • Очень доходчиво! Попов отдыхает! Спасибо.

  • Спасибо за урок! А как сделать проверку на занятость логина? И чтоб логин состоял тоько из латинских букв и цифр?

  • Огромное спасибо!

  • Спасибо огромное за уроки!Очень доступно объясняется.Хотелось бы еще увидеть урок "Поиск на сайте" .