Валидация ввода данных формы авторизации с использованием jQuery

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

В HTML5 имеются специальные средства валидации форм, а также существует множество сниппетов-валидаторов на JavaScript. Но выбирать средства валидации ввода данных нужно так, чтобы обеспечить кроссбраузерность и работу со старыми браузерами, а это не так просто.

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

В этой работе мы будем использовать следующие ресурсы:

  • шрифт Open Sans от Google;
  • набор иконок;
  • библиотека jQuery, подключаемая со стороннего хоста, например, с Google CDN;
  • Validator;
  • Reset.css;
  • HTML5shiv;
  • качественный фон, сделанный при помощи Subpattern;
  • немного свободного времени.

Все исходные коды этой статьи можно загрузить отсюда.

План работы

План работы

Прежде всего, подключим необходимые библиотеки, скрипты и стили.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Create a Flat Login/Sign up Page with Validation, Styling & Semantics Of Forms jQuery Plugin</title>
   <link href="css/style.css" media="screen" rel="stylesheet">
   <link href="css/reset.css" media="screen" rel="stylesheet">
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,700italic,800italic,400,300,600,800'rel='stylesheet' type='text/css'>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/validator.js"></script>
   <!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

 </head>

Разметка

В нашем примере мы упакуем всё в класс-обёртку container. Основные элементы разметки будут обозначены классом flat-design-form, а элементы меню мы сделаем при помощи ненумерованного списка, пункты которого будут входить в класс tab:

<div class="container">
    <div class="flat-design-form">
        <ul class="tabs">
            <li><a class="active" href="#login" id="login-tab" name=
            "login-tab"><span id="login_icon"></span> Login</a></li>

            <li><a href="#register" id="register-tab" name=
            "register-tab"><span id="signup_icon"></span> Register</a></li>
        </ul>

Теперь создадим контейнер для формы с идентификатором login. Позже мы подключим jQuery-скрипт, который будет показывать и скрывать саму форму. Сами элементы управления мы обозначим классом item:

<div class="form-display show" id="login">
      <h1>Login</h1>

      <form action="" method="post" novalidate="">
          <fieldset>
              <ul>
                  <li>
                      <div class="item">
                          <input data-validate-length-range="6" name="name"
                          placeholder="Username" required="required" type=
                          "text">
                      </div>
                  </li>

                  <li>
                      <div class="item">
                          <input data-validate-length-range="6" name=
                          "password" placeholder="Password" required=
                          'required' type="password">
                      </div>
                  </li>

                  <li><input class="button-login" type="submit" value=
                  "Login"></li>
              </ul>
          </fieldset>
      </form>
  </div>

Обратите внимание на семантику data-validate-length-range=”6;. Это выражение будет использоваться в jQuery-валидаторе, чтобы ограничить длину вводимого в поле текста. Заранее протестировать различные установки фильтрации вы можете здесь.

Мы завершили работу над секцией авторизации. Теперь приступим к регистрации. Эта область разметки будет ограничена блоком с ID=register и классами form-display и hide.

Изначально эта часть формы будет скрыта. А внутри неё также будут содержаться элементы управления, включённые в класс item и нагруженные определёнными семантическими правилами:

<div class="form-display hide" id="register">
        <h1>Register</h1>

        <form action="" method="post" novalidate="">
            <fieldset>
                <ul>
                    <li>
                        <div class="item">
                            <input data-validate-length-range="6" name="name"
                            placeholder="Username" required="required" type=
                            "text">
                        </div>
                    </li>

                    <li>
                        <div class="item">
                            <input class='email' name="email" placeholder=
                            "Email" required="required" type="email">
                        </div>
                    </li>
                        <div class="item">
                            <label><input name="url" placeholder="Website link"
                            required="required" type="url"></label>
                        </div>
                    </li>

                    <li><input class="button-register" id='send' type="submit"
                    value="Sign Up"></li>
                </ul>
            </fieldset>
        </form>
    </div>

Теперь наша форма должна напоминать то, что изображено на этой иллюстрации:

форма должна напоминать

Стили

Начнём оформление нашей страницы с самых общих стилей: тэга body и класса container:

body {
  background: url('../img/low_contrast_linen_2X.png');
  color: fff;
  font-family: 'Open Sans';
}
.container{width: 960px; margin: 0 auto;}

Теперь стилизуем элементы меню:

.flat-design-form{
  background: #f58020;
  margin: 130px auto;
  width: 400px;
  height: auto;
  position: relative;
  font-family: 'Open Sans';
  -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.75);

}
#login {
    padding-bottom: 20px;
}

#register {
    background: #0DA1FF;
    padding-bottom: 20px;
}

#login-tab {
    background: #0DA1FF;
}

#register-tab {
    background: #0DA1FF;
}

span#login_icon {
    width: 16px;
    height: 16px;
    left: 8px;
    position: absolute;
    background: url(../img/login.png)no-repeat;
    display: block;
}

span#signup_icon {
    width: 16px;
    height: 16px;
    left: 110px;
    position: absolute;
    background: url(../img/sign-in.png)no-repeat;
    display: block;
}

.tabs {
  height: 40px;
  margin: 0;
  padding: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 6px;
}

.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs a {
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  padding: 15px 30px 15px 30px;
   text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

А теперь возьмёмся за формы с полями ввода:

.form-display {
  padding: 0 20px;
  position: relative;
}

.form-display h1 {
  font-size: 30px;
  padding: 10px 0 20px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=email],
form input[type=url]{
  width: 100%;
  outline: none;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #545454;
   font-family: 'Open Sans';
  font-size: 13px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

Что касается кнопок, мы оформим их в приятном плоском стиле с особенным оформлением состояния активности и наведённого курсора:

.button-login{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    font-family: 'Open Sans';
    color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

    -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      transition: all 0.6s ease;
}

.button-login:hover {
  background: #1B78B2;
}

.button-register{
    display: block;
    background: #f58020;
    padding: 10px 30px;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    font-family: 'Open Sans';
    color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #c36518;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #c36518;
  box-shadow: inset 0 -2px #c36518;

    -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      transition: all 0.6s ease;
}

.button-register:hover {
  background: #fb7100;
}

.button-register:active {
  background: #136899;
}

Зададим памятки (placeholders) для наших полей ввода. Мы будем использовать вендор-зависимые селекторы для кроссбраузерности:

::-webkit-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-moz-placeholder {
/* Firefox 18- */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

::-moz-placeholder {
/* Firefox 19+ */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-ms-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

Наконец, чтобы оживить нашу валидацию, мы зададим индикацию ошибок при помощи эффектов CSS3. Сообщения об ошибках будут отображаться справа от соответствующих полей. Обратите особое внимание на правильное использование CSS3-свойства transition:

.item {
    position: relative;
}

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #ef3030;
    max-width: 170px;
    white-space: pre;
    position: absolute;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: .15s ease-out;
}

.item .alert::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-color: transparent #ef3030 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    top: 5px;
    left: -10px;
}

.item.bad .alert {
    left: 0;
    opacity: 1;
    top: 5px;
    left: 343px;
    font-size: 12px;
    padding: 10px;
}

jQuery

Следующий код будет управлять поочерёдным отображением секций (регистрации и авторизации) в зависимости от выбранных в меню команд при помощи назначения секциям классов show и hide:

(function($) {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';
    $('.tabs').on('click', 'li a', function(e) {
        e.preventDefault();
        var $tab = $(this),
            href = $tab.attr('href');
        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);
        $('.show').removeClass(SHOW_CLASS).addClass(HIDE_CLASS).hide();
        $(href).removeClass(HIDE_CLASS).addClass(SHOW_CLASS).hide().fadeIn(620);
    });
})(jQuery);

Теперь напишем код для подключения библиотеки Validator:

// initialize the validator function
validator.message['date'] = 'not a real date';
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
$('form').on('blur', 'input[required], input.optional, select.required', validator.checkField).on('change', 'select.required', validator.checkField).on('keypress', 'input[required][pattern]', validator.keypress);
$('.multi.required').on('keyup blur', 'input', function() {
    validator.checkField.apply($(this).siblings().last()[0]);
});
// bind the validation to the form submit event
//$('#send').click('submit');//.prop('disabled', true);
$('form').submit(function(e) {
    e.preventDefault();
    var submit = true;
    // evaluate the form using generic validaing
    if (!validator.checkAll($(this))) {
        submit = false;
    }
    if (submit) this.submit();
    return false;
});

Заключение

Готово! Мы создали красивую и функциональную страницу входа с валидацией ввода на стороне клиента при помощи jQuery-плагина Validator и возможностей CSS3. Это не единственный вариант организации валидации ввода.

Существует множество других библиотек и компонентов. Но мне наш сегодняшний вариант нравится из-за его простоты и возможности добавить крутые эффекты для сообщений.

Надеюсь, эта статья вам ещё пригодится. До встречи!

Перевод статьи «How to Create a Registration Page Validation Using jQuery» был подготовлен дружной командой проекта Сайтостроение от А до Я.