Elegant Pure JavaScript Form Validator – Vanilla Validator

Preview:

Description:

A vanilla JavaScript form validator to validate your form controls and display error messages next to invalid fields.

Works perfectly with the native HTML5 form validation.

How to use it:

Import the Vanilla Validator library from dist folder.

<script src="dist/vanilla-validator.concat.min.js"></script>

Initialize the Vanilla Validator on your HTML form.

var validator = new VanillaValidator({});

Apply validators to the form controls using the following selectors:

• control: ‘vv-control’
• required: ‘required’
• email: ’email’
• integer: ‘integer’
• digit: ‘digit’
• numeric: ‘numeric’
• pattern: ‘pattern’
• phone: ‘phone’
• url: ‘url’
• date: ‘date’
• currency: ‘currency’
• cep: ‘cep’
• maxLength: ‘max-length’
• minLength: ‘min-length’
• rangeLength: ‘range-length’
• sameLength: ‘same-length’
• max: ‘max’
• min: ‘min’
• range: ‘range’
• equalTo: ‘equal-to’
• cpf: ‘cpf’
• cnpj: ‘cnpj’
• cnh: ‘cnh’
• creditCard: ‘credit-card’
• hasExtension: ‘has-extension’
• customValidate: ‘custom-validate’
• async: ‘async’
• asyncWaiting: ‘vv-async-waiting’
• error: ‘error’
• formError: ‘form-error’
• messageError: ‘msg-error’
• wrapErrors: ‘wrap-errors’

<form>
  <div>
    <input type='text' class='required' placeholder='Name'>
  </div>
  <div>
    <input type='text' class='email' placeholder='Email'>
  </div>
  <input type='submit'>
</form>

Customize the error messages.

var validator = new VanillaValidator({
    messages: { // or by html attribute 'data-message-error'
      required: 'Required field',
      email: 'Invalid email',
      integer: 'Needs to be a integer',
      digit: 'Only letters and numbers',
      numeric: 'Only  numbers',
      pattern: 'Needs to matchs pattern',
      phone: 'Invalid phone number',
      url: 'Invalid url',
      date: 'Invalid date',
      currency: 'Invalid currency',
      cep: 'Invalid cep',
      maxLength: 'The amount of characters is greater than allowed',
      minLength: 'The amount of characters is less than allowed',
      rangeLength: 'The number of characters must be between 3 and 5',
      sameLength: 'The value needs to have 5 characters',
      max: 'The value needs to be less or equals to 5',
      min: 'The value needs to be greater or equals to 3',
      range: 'The value needs to be between 3 and 5',
      equalTo: 'The value needs to be 10',
      cpf: 'Invalid cpf',
      cnpj: 'Invalid cnpj',
      cnh: 'Invalid cnh',
      creditCard: 'Invalid credit card number',
      hasExtension: 'Invalid extension detected'
    }
});

Create your own validators.

var validator = new VanillaValidator({
    customValidationsConfig: {
      pattern: '[0-9]', // or by html attribute 'data-pattern'
      flags: 'g', // or by html attribute 'data-flags'
      maxLength: 5,
      minLength: 5,
      sameLength: 5,
      rangeLength: {
        min: 3,
        max: 5
      },
      max: 5,
      min: 3,
      range: {
        max: 5,
        min: 3
      },
      equalTo: 10,
      extensions: ['jpg', 'png'] // or by html attribute 'data-extensions' without spaces and separated by commas
    },
    customValidates: { // will react to the selector 'customValidate'
      'equal-anchored-field': { // must inform this key in html attribute 'data-validate-key'
        message: 'The value needs to be equal',
        fn: function(field, container){
          var queryAnchor = field.getAttribute('data-anchored-field');
          if(queryAnchor){
            var anchor = $.getChild(queryAnchor, container);
            if(anchor){
              if(field.value !== anchor.value) return false;
            }
          }
          return true;
        }
      },
      'different-anchored-field': { // must inform this key in html attribute 'data-validate-key'
        message: 'The value needs to be different',
        fn: function(field, container){
          var queryAnchor = field.getAttribute('data-anchored-field');
          if(queryAnchor){
            var anchor = $.getChild(queryAnchor, container);
            if(anchor){
              if(field.value === anchor.value) return false;
            }
          }
          return true;
        }
      },
    }
});

Async validators are supported as well.

var validator = new VanillaValidator({
    asyncValidates: {
      'async-validation-example': { // must inform this key in html attribute 'data-async-key'
        message: 'The async validation message',
        fn: function(field, message, container){
          var self = this;
          this.asyncValidationStart(field, 'validando', container);
          setTimeout(function(){
            if(field){
              var ret = (field.value === 'foo');
              self.asyncValidationFinish(field, message, container, ret);
            }
          }, 2000);
        }
      }
    }
});

Callback functions.

var validator = new VanillaValidator({
    callbacks: {
      eachFieldError: null,
      eachFieldSuccess: null,
      requiredError: null,
      requiredSuccess: null,
      emailError: null,
      emailSuccess: null,
      integerError: null,
      integerSuccess: null,
      digitError: null,
      digitSuccess: null,
      numericError: null,
      numericSuccess: null,
      phoneError: null,
      phoneSuccess: null,
      urlError: null,
      urlSuccess: null,
      dateError: null,
      dateSuccess: null,
      currencyError: null,
      currencySuccess: null,
      cepError: null,
      cepSuccess: null,
      maxLengthError: null,
      maxLengthSuccess: null,
      minLengthError: null,
      minLengthSuccess: null,
      rangeLengthError: null,
      rangeLengthSuccess: null,
      sameLengthError: null,
      sameLengthSuccess: null,
      maxError: null,
      maxSuccess: null,
      minError: null,
      minSuccess: null,
      rangeError: null,
      rangeSuccess: null,
      equalToError: null,
      equalToSuccess: null,
      cpfError: null,
      cpfSuccess: null,
      cnpjError: null,
      cnpjSuccess: null,
      cnhError: null,
      cnhSuccess: null,
      creditCardSuccess: null,
      creditCardError: null,
      hasExtensionSuccess: null,
      hasExtensionError: null,
      patternError: null,
      patternSuccess: null,
      beforeValidate: null,
      afterValidate: null,
      error: null,
      success: null
    },
    onContainerSuccess: null,
    onFormSubmit: null
});

More configuration options.

var validator = new VanillaValidator({
    container: 'form',
    button: null,
    validationBy: 'onsubmit', // [onclick, onsubmit]
    novalidateHTML5: true,
    validateOnFieldChanges: true,
    showListOfValidations: true,
    customViewErrors: {
      add: null,
      remove: null
    },
    customListErrors: {
      add: null,
      remove: null
    }
});