Author: | welisonmenezes |
---|---|
Views Total: | 2,210 views |
Official Page: | Go to website |
Last Update: | April 17, 2019 |
License: | MIT |
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 } });