Elegant Pure JavaScript Form Validator – Vanilla Validator

Category: Form , Javascript | April 17, 2019
Author:welisonmenezes
Views Total:2,210 views
Official Page:Go to website
Last Update:April 17, 2019
License:MIT

Preview:

Elegant Pure JavaScript Form Validator – Vanilla Validator

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
    }
});

You Might Be Interested In:


Leave a Reply