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

На примере валидации формы регистрации на сайте.


При проектировании форм на сайте возникает необходимость проверять правильность ввода данных пользователем. Существуют множество способов валидации форм и введённых данных в поля. Как правило основная и обязательная проверка должна происходить на сервере в момент получения данных пред дальнейшим использованием для обеспечения безопасности и не только. Но для удобства пользователя можно производить валидацию и на стороне клиента перед отправкой данных на сервер и даже во время заполнения. Такой подход поможет пользователю не ошибиться при вводе ещё на этапе заполнения.

Недавно на просторах интернета мне попалось достойное решение валидации формы регистрации на стороне клиента. Код можно использовать как целиком, так и модифицировать под свои задачи. Его работа представлена в демонстрации ниже.

Сначала создадим HTML разметку формы регистрации:

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="Login > 3 letters" />
         <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="" placeholder="Pass > 5 letters" />
         <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>

Стилизируем форму регистрации:

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://my-skills.ru/demo/img/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;   
}

И сказу приведу код для валидации формы:

JS
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 код скрипта (не валидация, а обработчик нажатия кнопки) будет немного отличаться:

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

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

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

  1. Для логина зададим ограничение – минимальное количество символов в логине 4. Если условие не соблюдается, то под полем ввода логина выводим соответствующее сообщение, а самому полю присваиваем класс error.
  2. Для поля e-mail сначала проверяем на заполненность и, если в нем что то есть, делаем проверку на соответствие маске. Информация о ошибке выводится аналогично полю ввода логина.
  3. Для полей пароль и подтверждение пароля сначала проверяем на заполненность, и если в них что то есть, делаем проверку на равенство паролей. Информация о ошибке выводится аналогично полю ввода логина.
Источник: © https://codernote.ru/jquery/validaciya-formy-jquery/

 

Дата публикации: 

ТОП 10 случайных публикаций



Сайт разработан студией © WEB-VidST   


Яндекс.Метрика