Валидация формы jQuery

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


Для примера разберем валидацию формы регистрации. Основные шаги:

  1. Пишем html-код
  2. Добавляем css
  3. Пишем валидацию:
    • имя
    • e-mail
    • пароль

html-код формы регистрации

i-regФорма классическая — логин, e-mail, пароль и подтверждение пароля. Для первых полей добавим placeholder и стилизуем его.

Css для формы регистрации

Валидация формы регистрации

Сразу приведу полный код валидации, а потом разберем его

Данный код будет корректно работать при обычной отправке формы. Для проверки формы, которая будет отправляться через ajax код скрипта (не валидация, а обработчик нажатия кнопки) будет немного отличаться:

  1. Для логина зададим ограничение — минимальное количество символов в логине 4. Если условие не соблюдается, то под полем ввода логина выводим соответствующее сообщение, а самому полю присваиваем класс error.
  2. Для поля e-mail сначала проверяем на заполненность и, если в нем что то есть, делаем проверку на соответствие маске. Информация о ошибке выводится аналогично полю ввода логина.
  3. Для полей пароль и подтверждение пароля сначала проверяем на заполненность, и если в них что то есть, делаем проверку на равенство паролей. Информация о ошибке выводится аналогично полю ввода логина.

9 комментариев

  1. Отличная инструкция. Перебрал множество, эта лучшая!
    Только не пойму в каком месте передать информацию в обработчик, если все поля заполнены?

    1. Евгений, если вы хотите отправлять данные ajax-ом, то тогда скрипт отправки можно писать сразу после:
      if ( validateForm() ) {
      event.preventDefault();
      }
      тут в случае ошибки validateForm() возвращает true, и выполнение прерывается, код следующий за этим условием выполняться не будет, а если все заполнено корректно, то продолжится выполнение кода.
      А если у вас выполняется отправка формы с перезагрузкой страницы, то достаточно у формы указать метод отправки (post или get) и action (если надо указать путь к обработчику)

      1. Алексей, спасибо за ответ.
        Но почему то не работает ajax методом.
        Вставляю свой код:
        else {
        var form = $(formis);
        $.ajax({
        type: «POST»,
        url: «mail.php»,
        data: form.serialize()
        }).done(function() {
        form.find(«.success»).addClass(«active»);
        setTimeout(function() {
        form.find(«.success»).removeClass(«active»);
        form.trigger(«reset»);
        }, 2000);
        });
        }
        То идет отправка POST методом и все передается в строку браузера.
        А если использовать без else, тогда данные сразу же отправляются, даже если не заполнены поля

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

          Подправил текст статьи. Спасибо за ваше замечание.

          1. Сейчас все заработало.
            Но, firefox пропускает.
            Ему нужен «event handler»

            $(‘#register’).on(‘submit’, function(event) {
            event.preventDefault(event);

  2. Привет Алексей!
    Скажи, а если, в случае передачи через аякс, я добавлю радио кнопки в форму, они передадутся?
    А если добавлю селект?

    А валидация происходит реактивно? или после заполнения всего и нажатия на кнопку сабмит?

    Спасибо!

    1. Все передастся. В данном примере валидация настроена на нажатие кнопки сабмит, но в принципе возможна любая реализация.

  3. Не хватает v_login = false.
    В текущем варианте при повторных нажатиях кнопки для корректно заполненного поля «login» каждый раз отрабатывает toggleClass(‘error’, v_login ).
    Оно то становится красненьким, то нет.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *