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

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

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

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

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

<div class="form__wrapper">
   <form id="register" action="#">
      <h1>Регистрация</h1>
      <div class="fields">
         <label for="login">Ваш логин:</label>
         <input type="text" id="login" value="" placeholder="AmateR">
         <span class="dot">*</span>
      </div>
      <div class="fields">
         <label for="email">Ваш e-mail:</label>
         <input type="text" id="email" value="" placeholder="youmail@domain.ru">
         <span class="dot">*</span>
      </div>
      <div class="fields">
         <label for="pass1">Пароль:</label>
         <input type="password" id="pass1" value="" >
         <span class="dot">*</span>
      </div>
      <div class="fields">
         <label for="pass2">Пароль еще раз:</label>
         <input type="password" id="pass2" value="" >
         <span class="dot">*</span>
      </div>


      <button type="submit" name="button" id="send">Отправить</button>
   </form>
</div>

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

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

/**
 * Стилизуем placeholder
 */

::-webkit-input-placeholder {color: #aaaaaa;}
::-moz-placeholder          {color: #aaaaaa;} /* Firefox 19+ */
:-moz-placeholder           {color: #aaaaaa;} /* Firefox 18- */
:-ms-input-placeholder      {color: #aaaaaa;}

input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/**
 * Основные стили
 */

body {
   background: url('https://codernote.ru/files/image/fon-1.png');
   font: 14px/20px 'Open Sans', serif;
}

h1, h2, h3 {
  text-align: center;
  letter-spacing: -0.6px;
}

.form__wrapper {
   width: 40%;
   margin: 20px auto;
}

form#register {
   position: relative;
   background: #FFF;
    
   padding: 10px;
   border: 1px solid #a7a7a7;
   -webkit-border-radius:4px;
   -moz-border-radius:4px; 
   border-radius: 4px; 
   box-shadow: 1px 3px 10px 0px rgba(0, 0, 0, 0.10);
}

form#register div.fields {
   position: relative;
   line-height: 30px;
   margin-bottom: 15px;
}

form#register input[type="text"], form#register input[type="password"] {
   width: 95%;
   outline: none;
   padding: 5px;
   border: 1px solid #a7a7a7;
}

form#register input[type="text"]:focus, form#register input[type="password"]:focus {
   border: 1px solid #2A900C;
}

form#register input[type="text"].error, form#register input[type="password"].error {
   border: 1px solid red;
}

form#register span.dot {
   position: absolute;
   color: red;
   line-height: 15px;
   right: 0;
}

form#register span.text-error {
  position: absolute;
  top: 0;
  left: 0;
  color: red;
  font-size: 10px;
  line-height: 10px;
}

form#register button {
   position: relative;
   margin-top: 15px;
   right: 0;
   
   text-decoration:none; 
   text-align:center; 
   padding:11px 32px; 
   border:solid 1px #004F72; 
   -webkit-border-radius:4px;
   -moz-border-radius:4px; 
   border-radius: 4px; 
   font-size: 14px; 
   font-weight:bold; 
   color:#E5FFFF; 
   background-color:#3BA4C7; 
   background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
   background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
   background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); 
   background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); 
   background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);   
   -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
   -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
   box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;   
}

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

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

jQuery(function($) {
  $('#register').on('submit', function(event) {
    if ( validateForm() ) { // если есть ошибки возвращает true
      event.preventDefault();
    }
  });
  
  function validateForm() {
    $(".text-error").remove();
    
    // Проверка логина    
    var el_l    = $("#login");
    if ( el_l.val().length < 4 ) {
      var v_login = true;
      el_l.after('<span class="text-error for-login">Логин должен быть больше 3 символов</span>');
      $(".for-login").css({top: el_l.position().top + el_l.outerHeight() + 2});
    } 
    $("#login").toggleClass('error', v_login );
    
    // Проверка e-mail
    
    var reg     = /^\w+([\.-]?\w+)*@(((([a-z0-9]{2,})|([a-z0-9][-][a-z0-9]+))[\.][a-z0-9])|([a-z0-9]+[-]?))+[a-z0-9]+\.([a-z]{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/i;
    var el_e    = $("#email");
    var v_email = el_e.val()?false:true;
  
    if ( v_email ) {
      el_e.after('<span class="text-error for-email">Поле e-mail обязательно к заполнению</span>');
      $(".for-email").css({top: el_e.position().top + el_e.outerHeight() + 2});
    } else if ( !reg.test( el_e.val() ) ) {
      v_email = true;
      el_e.after('<span class="text-error for-email">Вы указали недопустимый e-mail</span>');
      $(".for-email").css({top: el_e.position().top + el_e.outerHeight() + 2});
    }
    $("#email").toggleClass('error', v_email );
    
    // Проверка паролей
    
    var el_p1    = $("#pass1");
    var el_p2    = $("#pass2");
    
    var v_pass1 = el_p1.val()?false:true;
    var v_pass2 = el_p1.val()?false:true;
    
    if ( el_p1.val() != el_p2.val() ) {
      var v_pass1 = true;
      var v_pass2 = true;
      el_p1.after('<span class="text-error for-pass1">Пароли не совпадают!</span>');
      $(".for-pass1").css({top: el_p1.position().top + el_p1.outerHeight() + 2});
    } else if ( el_p1.val().length < 6 ) {
      var v_pass1 = true;
      var v_pass2 = true;
      el_p1.after('<span class="text-error for-pass1">Пароль должен быть не менее 6 символов</span>');
      $(".for-pass1").css({top: el_p1.position().top + el_p1.outerHeight() + 2});
    } 
    
    $("#pass1").toggleClass('error', v_pass1 );
    $("#pass2").toggleClass('error', v_pass2 );
    
    return ( v_login || v_email || v_pass1 || v_pass2 );
  }
   
});

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

jQuery(function($) {
  $('#register').on('submit', function(event) {
    event.preventDefault(); // отменяем событие по умолчанию
    if ( validateForm() ) { // если есть ошибки возвращает true
      return false; // прерываем выполнение скрипта
    }

    // тут ajax запрос
  });

  // тут функция валидации без изменений
}

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

9 ответов к «Валидация формы jQuery»

Евгений:

01.11.2016 в 14:56

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

Ответить
1. Алексей:
  
  01.11.2016 в 15:17
  
  Евгений, если вы хотите отправлять данные ajax-ом, то тогда скрипт отправки можно писать сразу после:
  if ( validateForm() ) {
  event.preventDefault();
  }
  тут в случае ошибки validateForm() возвращает true, и выполнение прерывается, код следующий за этим условием выполняться не будет, а если все заполнено корректно, то продолжится выполнение кода.
  А если у вас выполняется отправка формы с перезагрузкой страницы, то достаточно у формы указать метод отправки (post или get) и action (если надо указать путь к обработчику)
  
  Ответить
  1. Евгений:
    
    02.11.2016 в 07:20
    
    Алексей, спасибо за ответ.
    Но почему то не работает 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. Алексей:
      
      02.11.2016 в 09:23
      
      Прошу прощения, моя ошибка. Совсем забыл, что приведенный мной код будет работать только с обычной отправкой формы. В случае же, когда отправляем с помощью ajax, необходимо немного изменить логику — событие отправки формы по умолчанию отключаем сразу, а вот если есть ошибки при заполнении возвращаем false:
      
      $('#register').on('submit', function() { event.preventDefault(); if ( validateForm() ) { return false; } // тут ваш обработчик }
      
      Подправил текст статьи. Спасибо за ваше замечание.
      
      Ответить
      1. Евгений:
        
        02.11.2016 в 13:21
        
        Сейчас все заработало.
        Но, firefox пропускает.
        Ему нужен «event handler»
        
        $(‘#register’).on(‘submit’, function(event) {
        event.preventDefault(event);
Денис:

08.11.2016 в 20:11

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

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

Спасибо!

Ответить
1. Алексей:
  
  08.11.2016 в 20:18
  
  Все передастся. В данном примере валидация настроена на нажатие кнопки сабмит, но в принципе возможна любая реализация.
  
  Ответить
  1. Денис:
    
    08.11.2016 в 20:26
    
    Спасибо!
    
    Ответить
gofk:

15.08.2017 в 16:52

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

Ответить

Заметки программиста

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

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

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

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

Опубликовано Алексей

9 ответов к «Валидация формы jQuery»

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