BootstrapValidator - лучший jQuery-плагин для валидации форм

Этот плагин поддерживает большинство HTML5 полей, таких как color, email, range and url, и HTML5-атрибутов, например, min, max, pattern, required; умеет работать с иконками Glyphicons и FontAwesome; позволяет проводить проверку полей с использованием Ajax, и многое другое.

Использование плагина

Плагин возможно установить с bower:

$ bower install bootstrapValidator

Или же можно скачать с официальной страницы на сайте jQuery.

После того как вы скачали архив, необходимо подключить файлы к странице. Поскольку для работы плагина BootstrapValidator требуется jQuery и Bootstrap 3, то вы должны сначала подключить требуемые CSS и JS файлы к странице:

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/></p>
<p><script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>

Затем необходимые для работы плагина JS-файлы:

// Вы можете использовать сжатую версию (рекомендуется для работающего сайта)
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>

// Или использовать оригинальный скрипт (при разработке сайта)
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>

Создание форм

Так как BootstrapValidator предназначен для использования с Bootstrap, ваша форма должна быть структурирована с использованием классов Bootstrap.

Если форма не структурирована с использованием классов Bootstrap (например, элемент, содержащий поле и связанную с ним метку НЕ имеет form-group класс), вы увидите следующее сообщение об ошибке в консоли:

Uncaught RangeError: Maximum call stack size exceeded

Не используйте свойства формы, такие как submit, reset, length, method, чтобы установить имя или идентификатор атрибутов формы или полей. Конфликты имен могут вызвать проблемы.

Например, вы не сможете отправить форму после проверки, если используете имя submit для кнопки Отправить:

<button type="submit" name="submit" class="btn btn-primary"> Отправить </button>

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

Пример кода для вызова плагина:

$(document).ready(function() {
  $('#registerForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        message: 'The username is not valid',
        validators: {
          notEmpty: {
            message: 'Поле имя не может быть пустым'
          },
          stringLength: {
            min: 6,
            max: 30,
            message: 'The username must be more than 6 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: 'The username can only consist of alphabetical, number and underscore'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: 'The email is required and cannot be empty'
          },
          emailAddress: {
            message: 'The input is not a valid email address'
          }
        }
      }
    }
  });
});