jQuery валидация полей формы за 2 минуты

В этом уроке я покажу вам как настроить базовую валидацию полей формы при помощи jQuery, на примере формы регистрации.

Для работы нам понадобится плагин jQuery Validation, который будет проверять поля нашей формы. Основной принцип этого плагина заключается в том, чтобы указать правила проверки и выдачи сообщений об ошибках для HTML-элементов в JavaScript.

Ниже представлен конечный результат валидации:

See the Pen Basic jQuery Form Validation Example by SitePoint (@SitePoint) on CodePen.

Шаг 1: Подключение jQuery

Для начала нам нужно подключить jQuery v1.x для корректной работы плагина валидации, который в настоящее время совместим только с первыми версиями jQuery.

Варианты установки jQuery:

  • Скачать с официального сайта
  • Скачать используя Bower: $ bower install jquery#1.x --save-dev
  • Скачать используя npm: $ npm install jquery@1.x --save-dev
  • Использовать CDN: https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js

Создадим новый HTML документ под названием index.html и подключим в него jQuery:

<!-- В атрибут "src" добавьте путь к файлу jquery -->
<script src="/vendor/jquery/dist/jquery.min.js"></script>

Шаг 2: Подключение плагина jQuery Validation

Варианты установки

  • Скачать с официального сайта
  • Скачать используя Bower: $ bower install jquery-validation
  • Скачать используя npm: $ npm install jquery-validation
  • Использовать CDN: https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js

Подключаем плагин после jQuery:

<!-- В атрибут "src" добавьте путь к плагину -->
<script src="/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Шаг 3: Создание HTML формы

Для формы регистрации нам понадобятся следующие поля:

  1. Имя
  2. Фамилия
  3. Email
  4. Пароль

Ниже представлена HTML разметка формы:

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра."/>

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="●●●●●"/>

    <button type="submit">Register</button>

  </form>
</div>

Шаг 4: Стилизация формы

Создайте новый файл css/style.css, и подключите его в секцию <head> вашего HTML документа:

<link rel="stylesheet" href="/css/style.css"/>

Скопируйте следующий стиль в CSS файл:

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Styles */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
form .error {
  color: #ff0000;
}

Если вы используете Compass (SCSS), вы можете использовать альтернативный стиль:

@import "compass";
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Color settings */
$formBg: #2c3e50;
$formColor: #fff;
$inputBg: #fff;
$inputColor: #000;
$buttonBg: #e67e22;
$buttonColor: #fff;
$errorMsgColor: #ff0000;

/* Styles */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: $formBg;
  color: $formColor;
  @include border-radius(4px);

  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
  input {
    height: 25px;
    line-height: 25px;
    background: $inputBg;
    color: $inputColor;
    padding: 0 6px;
    @include box-sizing(border-box);
  }
  button {
    height: 30px;
    line-height: 30px;
    background: $buttonBg;
    color: $buttonColor;
    margin-top: 10px;
    cursor: pointer;
  }
  .error {
    color: $errorMsgColor;
  }
}

Не забудьте стилизовать класс .error который используется для отображения сообщения об ошибке.

Шаг 5: Создание правил проверки полей формы

И наконец, инициализируем плагин jQuery валидации формы. Создайте новый файл js/form-validation.js и подключите его после плагина jQuery Validation в HTML документе, пример подключения вы можете увидеть на сайтеhttp://www.proxyprivat.com.

<script src="/js/form-validation.js"></script>

Скопируйте следующий код в js файл:

// Ждем когда загрузится DOM
$(function() {
  // Инициализация плагина на форме
  // Форма имеет атрибут "registration"
  $("form[name='registration']").validate({
    // Правила проверки полей
    rules: {
      // Ключ с левой стороны это название полей формы.
      // Правила валидации находятся с правой стороны
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Отдельное правило для проверки email
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Установка сообщений об ошибке
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});

Заключение

Вот и все, это довольно простая задача. Теперь у вас есть представление о том, как настроить проверку формы с JQuery. Имейте в виду, что это не заменяет проверку со стороны сервера. Поэтому по-прежнему злоумышленник может манипулировать или обойти правила проверки (например, с помощью инструментов разработчика в браузере).

Перевод статьи Basic jQuery Form Validation Example (2mins)

Тэги: form

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.