Валидация форм с jQuery Validation Plugin

Для валидации формы подключите jQuery и jQuery Validation Plugin, затем вызовите validate() для нужной формы. Правила проверки, сообщения и стили задаются в настройках метода.

Как подключить jQuery Validation Plugin

Для проверки формы используйте jQuery Validation Plugin. Плагин проверяет обязательные поля, длину строк, числа, email и другие значения.

Библиотека jQuery должна загружаться раньше плагина.

Для локального примера установите пакеты через npm. Откройте терминал в папке проекта и выполните команды:

npm init -y
npm install jquery jquery-validation

В папке проекта появится каталог node_modules с библиотеками.

Создайте рядом файл index.html с такой структурой:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Проверка формы</title>
  <link rel="stylesheet" href="form.css">
</head>
<body>
  <!-- Вставьте сюда разметку формы -->

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/jquery-validation/dist/jquery.validate.min.js"></script>
  <script src="form.js"></script>
</body>
</html>

Создайте пустые файлы form.js и form.css рядом с index.html. JavaScript записывайте в form.js, стили – в form.css.

Валидация первой формы

Добавьте форме идентификатор или класс, чтобы обратиться к ней из JavaScript. Имена атрибутов name понадобятся плагину для сопоставления правил.

<form id="basic-form" action="" method="post">
  <p>
    <label for="name">Имя, минимум 3 символа</label>
    <input id="name" name="name" minlength="3" type="text" required>
  </p>
  <p>
    <label for="email">Электронная почта</label>
    <input id="email" type="email" name="email" required>
  </p>
  <p>
    <button type="submit">Проверить</button>
  </p>
</form>

Запишите в form.js вызов validate() после загрузки страницы.

$(document).ready(function() {
  $("#basic-form").validate();
});

Откройте index.html в браузере и отправьте пустую форму. Под полями появятся сообщения, а класс error добавится к ошибочным элементам. Введите имя из 2 символов и повторите отправку: проверка длины отклонит значение.

Если сообщений нет, откройте консоль инструментов разработчика браузера. Ошибка $ is not defined указывает на недоступность jQuery. Ошибка validate is not a function обычно означает, что плагин не загрузился или подключен к другому экземпляру jQuery.

Каждый следующий пример инициализации заменяет предыдущий код в form.js. Не добавляйте несколько вызовов подряд: повторный validate() возвращает существующий валидатор и не заменяет его настройки.

Параметры validate() и исключение полей

Метод validate() принимает объект настроек. В нем можно задать правила, сообщения, классы и поведение проверки.

Чтобы исключить поле или группу полей, передайте селектор в опцию ignore. Например, значение '.skip-validation' исключит элементы с этим классом.

$(document).ready(function() {
  $("#basic-form").validate({
    ignore: ":hidden, .skip-validation"
  });
});

Селектор :hidden сохраняет исключение скрытых полей, а второй селектор добавляет ваш класс. Опция ignore входит в объект настроек validate(); отдельного метода ignore() для этого примера нет.

Добавление правил валидации для полей ввода

Правила передаются в объекте rules. Ключом служит значение атрибута name, а вложенный объект содержит условия проверки.

Добавьте в форму еще 2 поля перед кнопкой отправки:

<p>
  <label for="age">Возраст, от 18 лет</label>
  <input id="age" name="age" type="text" inputmode="numeric">
</p>
<p>
  <label for="weight">Вес в килограммах, обязателен при возрасте больше 50 лет</label>
  <input id="weight" name="weight" type="text" inputmode="decimal">
</p>

$(document).ready(function() {
  $("#basic-form").validate({
    rules: {
      name: { required: true, minlength: 3 },
      age: { required: true, number: true, min: 18 },
      email: { required: true, email: true },
      weight: {
        required: {
          depends: function() {
            return Number($("#age").val()) > 50;
          }
        },
        number: true,
        min: 0
      }
    }
  });
});

Правило required требует значение, а minlength: 3 принимает строку минимум из 3 символов. Правило min: 18 задает нижнюю границу возраста.

Функция depends делает вес обязательным при возрасте больше 50 лет. Проверки number и min продолжают действовать для заполненного поля веса при любом возрасте.

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

Список встроенных методов проверки доступен в документации jQuery Validation Plugin.

Создание собственных сообщений об ошибках

Объект messages связывает поле и правило с текстом ошибки. Название поля должно совпадать со значением его атрибута name.

Добавьте свойства rules и messages внутрь объекта настроек validate():

rules: {
  name: {
    required: true,
    minlength: 3
  }
},
messages: {
  name: {
    required: "Введите имя",
    minlength: "Введите минимум 3 символа"
  }
}

Ключ required задает сообщение для пустого поля. Если собственного сообщения нет, плагин использует стандартный текст.

Как оформить ошибки и корректно заполненные поля

Опции errorClass и validClass задают классы для ошибочных и корректных полей. Несколько классов передавайте одной строкой через пробел.

Запишите в form.js полный вызов с настройками оформления:

$(document).ready(function() {
  $("#basic-form").validate({
    errorClass: "error fail-alert",
    validClass: "valid success-alert"
  });
});

CSS запишите отдельно, в файл form.css:

#basic-form label.error.fail-alert,
#basic-form em.error.fail-alert {
  display: block;
  border: 2px solid red;
  border-radius: 4px;
  line-height: 1;
  padding: 2px 0 6px 6px;
  background: #ffe6eb;
}

#basic-form input.error.fail-alert {
  border: 2px solid red;
}

#basic-form input.valid.success-alert {
  border: 2px solid #4CAF50;
  color: green;
}

Селекторы сообщений учитывают элементы label и em. Корректное поле получит зеленую рамку после успешной проверки.

Дополнительные опции настройки плагина

Опции onfocusout, onkeyup и onclick управляют обработкой соответствующих событий формы. Установите нужную опцию в false, чтобы отключить проверку для этого события.

onfocusout: false,
onkeyup: false,
onclick: false

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

Описание параметров доступно в справке по методу validate().

Плагин выводит ошибку через элемент label. Опция errorElement позволяет заменить его, например, на em. Опция wrapper добавляет вокруг сообщения указанный HTML-элемент.

errorElement: "em",
wrapper: "div"

Объедините настройки в один вызов:

$(document).ready(function() {
  $("#basic-form").validate({
    ignore: ":hidden, .skip-validation",
    rules: {
      name: { required: true, minlength: 3 },
      age: { required: true, number: true, min: 18 },
      email: { required: true, email: true },
      weight: {
        required: {
          depends: function() {
            return Number($("#age").val()) > 50;
          }
        },
        number: true,
        min: 0
      }
    },
    messages: {
      name: {
        required: "Введите имя",
        minlength: "Введите минимум 3 символа"
      },
      age: {
        required: "Введите возраст",
        number: "Введите возраст числом",
        min: "Возраст должен быть не меньше 18 лет"
      },
      email: {
        required: "Введите электронную почту",
        email: "Введите адрес в формате name@example.com"
      },
      weight: {
        required: "Укажите вес, если ваш возраст больше 50 лет",
        number: "Введите вес числом; дробную часть отделяйте точкой",
        min: "Вес не может быть отрицательным"
      }
    },
    errorClass: "error fail-alert",
    validClass: "valid success-alert",
    errorElement: "em",
    wrapper: "div",
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    submitHandler: function() {
      alert("Форма прошла проверку");
      return false;
    }
  });
});

Обработчик submitHandler показывает учебное уведомление вместо отправки данных на сервер.

1. Введите имя из 2 символов, возраст 17 и email без символа @. Форма покажет 3 сообщения после нажатия «Проверить».
2. Укажите имя «Анна», возраст 51 и почту anna@example.com.
3. Оставьте вес пустым: плагин покажет сообщение о весе.
4. Введите вес -1, и ограничение минимального значения отклонит его.
5. Замените вес на 65.5: браузер покажет уведомление «Форма прошла проверку».

Для рабочей отправки задайте форме адрес серверного обработчика в action и удалите учебный submitHandler. Сервер должен повторно проверять значения: пользователь может отключить JavaScript или отправить запрос напрямую.

Формы jQuery, доступные на CodeCanyon

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

1. Timon Step Form

Timon Step Form подойдет для сценария, где длинную анкету нужно разделить на несколько экранов.

2. Smart Forms

Smart Forms подойдет, если одной форме нужны дополнительные элементы и проверка полей.

3. Just Forms Advanced

Just Forms Advanced рассчитан на проекты с готовыми сценариями форм. Выберите его, если вам важнее набор шаблонов, чем настройка одного небольшого поля.

4. Forms Plus JS

Forms Plus JS подойдет для анкет, где нужно выполнять вычисления во время заполнения формы.

5. Sky Forms

Sky Forms подойдет, если проекту нужны готовые визуальные варианты элементов.

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

jQuery Validation Plugin подключает проверку полей к существующей HTML-форме. Вызов validate() запускает базовую проверку, а объекты rules и messages задают условия и текст ошибок.

Для простой формы достаточно HTML-атрибутов и вызова без настроек.

Если обязательность поля зависит от другого значения, используйте depends внутри соответствующего правила. Объединяйте правила, сообщения и оформление в одном объекте настроек. Храните JavaScript и CSS отдельно: так проще найти ошибку и изменить оформление.

Совет от нашей редакции: если правило не срабатывает, сначала сравните ключ в rules с атрибутом name поля. Совпадения только с id недостаточно: rules и messages используют именно name.