1.1.5 • Published 2 years ago
nwhval v1.1.5
NWH Validator - Frontend validation done right.
This library is a fully working and up to date (Bootstrap 5+) validator for any HTML form.
Installation
NPM
npm install nwhvalYARN
yarn add nwhvalUsage
import Validator from "nwhval";
const form = document.querySelector("#my-form");
const validator = new Validator(form);
form.addEventListener("submit", (e) => {
e.preventDefault();
if (validator.validate()) {
// form is valid, get ready for backend validation !
}
});Configuration
You can pass parameters to the validator constructor to configure it.
| Parameter | Description | Default value | Available Options |
|---|---|---|---|
styling | Wether to use Bootstrap 4 or 5 styling | bootstrap-5 | boostrap-4, bootstrap-5 |
classTo | Class to add to the form-group | form-group | |
errorClass | Class to add to the form-group when the field is invalid | is-invalid | |
successClass | Class to add to the form-group when the field is valid | is-valid | |
errorTextParent | Parent element to add the error text | form-group | |
errorTextTag | Tag to use to add the error text | div | |
errorTextClass | Class to add to the error text | invalid-feedback | |
live | Whether to validate the form on keyup or on submit | true | |
lang | Language to use for the error messages | en | fr, es, en |
A note on the lang parameter
Currently, only English, French and Spanish are supported. Feel free to add your own language and open a merge request !
Config Usage
import Validator from "nwhval";
const validatorConfig = {
styling: "bootstrap-5",
classTo: "form-group",
errorClass: "is-invalid",
successClass: "is-valid",
errorTextParent: "form-group",
errorTextClass: "invalid-feedback",
errorTextTag: "div",
live: true,
lang: "en",
};
const form = document.querySelector("#my-form");
const validator = new Validator(form, validatorConfig);
form.addEventListener("submit", (e) => {
e.preventDefault();
if (validator.validate()) {
// form is valid, get ready for backend validation !
}
});