Vanilla Parsley

Sobre

Validation lib using VanillaJS, based on ParsleyJS. Currently WIP.

Constructor

const nameValidator = new VanillaParsley({
  targetElement: '#name'
})

Options

targetElement: String, HTMLElement (obligatory)

Defines which element should be validated.

• Possible values: String, HTML Element (Single element for now)

// Validates the element with id 'name'
const nameValidator = new VanillaParsley({
  targetElement: '#name',
});

// Validates the element with id 'age'
const ageValidator = new VanillaParsley({
  targetElement: document.getElementById('age'),
});

validationTriggers: Array

Array containing a list of events that should be used to trigger the validation on the input field.

Default: ['blur', 'keyup']

const nameValidator = new VanillaParsley({
  targetElement: '#name',
  validationTriggers: ["blur", "keydown", "focusin"]',
});

errorIcon: String

String containing a SVG to be used as the error icon to display. Must have the class validation__error-icon

Default: <svg xmlns="http://www.w3.org/2000/svg" class="validation__error-icon icon icon-tabler icon-tabler-x" width="44" height="44" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg>

Methods

addCustomValidator({validatorSettings})

Adds a new custom validator. validatorSettings must follow the format:

// valueToCheck: Value of the field being validated
// attributeValue: Value set on the attribute of the validator.
// validationMethod: Function to be used in the validation. If it returns true, the current input is validated.
// errorMessage: Function that returns the error message if the current input is invalid.

validatorSettings: {
  minlength: {
   validationMethod(valueToCheck, attributeValue) {
    if (valueToCheck.length >= parseInt(attributeValue)) return true;
    else return false;
   },
   errorMessage(attributeValue) {
    return `Minimum of ${attributeValue} characters`;
   },
  },
},

Example of a custom validator for a full name (Minimum of 2 words of 3 characters each):

new VanillaParsley({
  targetElement: '#name',
 }).addCustomValidator({
  fullname: {
   validationMethod(valueToCheck) {
    const regex = /^([A-zÀ-ú '´]{3,})+\s+([A-zÀ-ú '´]{3,})$/g;
    if (regex.test(valueToCheck)) return true;
    return false;
   },
   errorMessage() {
    return `Type your full name`;
   },
  },
 });