Validate form plugin

Simple plugin for form validation

Description

This plugin validate form

Initialization

Validate.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

{
  liveChange: true, // realtime validating fields
  onError(errors) { //do something with errors object }
  onSuccess(event) { event.preventDefault(); //do something }
  onChange(field) { // field object }
  onReset(event) { // reset form and removing errors}
  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

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

Validate.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"/>

Demos

Gender