nwhval

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 nwhval

YARN

yarn add nwhval

Usage

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