Validator form plugin

Description

This plugin validate form

Initialization

Validator.run(selectors, options); // selectors - node|nodeList|string

Markup

One example of markup

<form action="" class="js-validate" method="POST">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Name" data-valid="required|minLen(2)">
  </div>
  <div class="form-group">
    <label for="e-mail">Email</label>
    <input type="text" id="e-mail" name="e-mail" placeholder="E-mail" data-valid="required|email"/>
  </div>
  <button>Send<button/>
</form>

Options

All options with defaults

{
  // automatically display errors
  showErrors: true,

  // triggers to run validation
  checkChange: true,
  checkInput: false,
  checkBlur: false,

  // to automatically display errors
  // showErrors must be enabled
  containerSelector: '.form-group',
  errorClass: 'has-error',
  errorHintClass: 'error-hint',

  // Validator Events
  onSuccess(event) { event.preventDefault(); /* do something */ },
  onError(errors) { /* do something with errors object */ },
  onChange(field) { /* field object */ },
  onReset(event) { /* reset form and removing errors */}

  // Custom rules
  validators: {
    regex: {
      isHuman: {
        pattern: /^human$/i, // check `word` in the field
        error: 'You must type the word human' // error message
      }
    }
  }
}

Simple localization

For example russian messages

Validator.i18n = {
  required: 'Данное поле обязательно для заполнения',
  minLen: 'Минимально допустимое количество символов равно %s%',
  maxLen: 'Максимально допустимое количество символов равно %s%',
  email: 'Поле e-mail имеет неверный формат',
  number: 'Введенные данные должны быть числом',
  equalTo: 'Введенные данные не совпадают'
}

Validator.run('.js-validate', options);

Custom messages using the data-attributes data-valid-msg-{method_name}

<input type="text" data-valid="required|email" data-valid-msg-email="Invalid email format"/>