JаvaScript: Пользовательский валидатор форм HTML5 на JavaScript - Just-validate

Just-validate - это библиотека для проверки формы на основе атрибутов данных HTML5 без зависимостей, которая поддерживает проверку формы как на стороне клиента, так и на стороне сервера.

Библиотека Just-validate полностью настраивается с помощью jаvascript. Совместим с фреймворком Bootstrap.

Установка через менеджер пакетов.

# NPM
$ npm install just-validate

# Bower
$ bower install just-validate

Основное использование:

1. Импортируйте библиотеку Just-validate или напрямую загрузите и подключите в html-документ минифицированную версию библиотеки Just-validate.

import JustValidate from 'just-validate';

<script src="/js/just-validate.production.min.js"></script>

2. Определите свои правила проверки и примените их к полям формы. Все доступные правила:

• required
• email
• minLength
• maxLength
• number
• minNumber
• maxNumber
• password
• strongPassword
• customRegexp

// initialize the validation library
const validation = new JustValidate('#form', {
      errorFieldCssClass: 'is-invalid',
});

// apply rules to form fields
validation
  .addField('#name', [
    {
      rule: 'minLength',
      value: 3,
    },
    {
      rule: 'maxLength',
      value: 30,
    },
  ])
  .addField('#email', [
    {
      rule: 'required',
      errorMessage: 'Field is required',
    },
    {
      rule: 'email',
      errorMessage: 'Email is invalid!',
    },
  ])
  .addField('#password', [
    {
      rule: 'password',
    },
  ])
  .addField('#message', [
    {
      validator: (value) => {
        return value[0] === '!';
      },
    },
  ])
  .addField('#consent_checkbox', [
    {
      rule: 'required',
    },
  ])
  .addField('#favorite_animal_select', [
    {
      rule: 'required',
    },
  ])
  .addRequiredGroup(
    '#read_terms_checkbox_group',
    'You should select at least one communication channel'
  )
  .addRequiredGroup('#communication_radio_group')
  .onSuccess((event) => {
    console.log('Validation passes and form submitted', event);
  });

3. Настройте и кастомизируйте библиотеку проверки формы.

const validation = new JustValidate('#form', {
      errorFieldCssClass: 'is-invalid',
      errorFieldStyle: {
        border: '1px solid red',
      },
      errorLabelCssClass: 'is-label-invalid',
      errorLabelStyle: {
        color: 'red',
        textDecoration: 'underlined',
      },
      focusInvalidField: true,
      lockForm: true,
      tooltip: {
        position: 'top',
      },
      },
      [  // localize the library here
        {
          key: 'Name is too short',
          dict: {
            ru: 'Имя слишком короткое',
            es: 'El nombre es muy corto',
          },
        },
        {
          key: 'Field is required',
          dict: {
            ru: 'Обязательное поле',
            es: 'Se requiere campo',
          },
        },
      ]
});