ryv v1.0.4
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`;
},
},
});