Description

NVal is a vanilla js validator which helps to migrate from jQuery Validation plugin. It parses html attributes and assign rules and messages to the elements. It also has simple API. See also NVal-Tippy plugin for use NVal with awesome validation tooltips!

Changes

v. 1.1.4 (2019-03-05)

• Fixed issue with rule activation by assign rule attribute.
• Added toggle rule attribute.
• Updated dependecies.

v. 1.1.3 (2018-12-20)

• Fixed working of activity flag in HTML attributes. Now data-val-[rule]="[true|false]" works properly.

v. 1.1.2 (2018-11-10)

• Fixed select element validation rule.

Usage

Install

npm install nval

Prepare

Import:

import{NVal}from"nval";

or use the scripts tag (bundle):

<scriptsrc="nval.min.js"></script>

Then: (TypeScript)

varnval=newNVal(document.getElementById("myForm")asHTMLFormElement);

(JavaScript, using scripts tag)

varnval=newNVal.NVal(document.getElementById("myForm"));// In JS bundle NVal.* required, because of UMD library!

Run check

nval.isValid()// Returns boolean.

Common attributes

Attribute	Action
data-val-[ruleName]="true"	Assign rule to the element (input/textarea/etc.).
data-msg-[ruleName]="[message]"	Define message for the rule.
data-error="#[elementId]"	Define error placement container.
`data-val-toggle-[ruleName]="[true	false]"`

Rule attributes

Attribute	Action
data-val-required="true"	Make element required.
data-val-minlength="[number]"	Define minimal length.
data-val-maxlength="[number]"	Define maximal length.
data-val-range="true"	Define both borders for number. You must define min and max attributes.

Email rule will be assign automatically, but you must define the message for it by yourself (for ex.: data-msg-email="Email address is not valid.").

NVal also supports placeholders for error messages. For example: data-msg-minlength="Minimal length is {0}.", data-msg-range="From {0} till {1}.".

API

Method	Description
addRules	Add custom global rules.
assignRules	Assign custom rules to the element.
assignExistingRule	Assign existing rule to the element.
toggleRule	Activate/Deactivate the rule.

Usage

Note, that in examples below nval is instance.

Add custom global rules

nval.addRules([{fieldTypes: [arrayofthe'FieldTypes'],// Type of the elements.instance: {name: [rulename],// Rule name.apply(elements: HTMLElement[],errorMessage: string): ValidationResult{// Your validation code here.}}}]);

Example:

nval.addRules([{fieldTypes: [FieldType.Text],// Type of the elements.instance: {name: "agreed",// Rule name.apply(elements: HTMLElement[],errorMessage: string): ValidationResult{varelement=elements[0]asHTMLInputElement;varval=element.value;if(val==null||val==="")returnValidationResult.createOk(elements);if(val.toLowerCase()==="agreed")returnValidationResult.createOk(elements);returnValidationResult.createError(elements,errorMessage);}}}]);

Then added rule will be assigned to the elements which will have HTML attribute: data-val-agreed="true" Hense, validation message will be determined by this: data-msg-agreed="You must type 'agreed'." Note, that for different fieldTypes there are can be different rules. So, for this example, rule agreed cannot be assigned to another field types except [input="text"].

Assign custom rules to element

nval.assignRules([htmlelement],[{instance: {name: [rulename],apply(elements: HTMLElement[],errorMessage: string): ValidationResult{// Your code here...}},errorMessage: [errormessage],isActive: [true|false]}]);

Example:

nval.assignRules(middleNameElement,[{instance: {name: "middlenamecheck",// Rule name.apply(elements: HTMLElement[],errorMessage: string): ValidationResult{varelement=elements[0]asHTMLInputElement;varval=element.value;if(val==null||val==="")returnValidationResult.createOk(elements);if(val[0]===val[0].toLowerCase())// Check for the first letter that must be capitalized.returnValidationResult.createError(elements,errorMessage);returnValidationResult.createOk(elements);}},errorMessage: "Middle name must have first capital letter.",// Error message.isActive: true}]);

Assign existing rule to the element

nval.assignExistingRule([htmlelement],[rulename],[errormessage]);

Example:

nval.assignExistingRule(middleNameElement,"required","This field is required.");

Toggle rule

nval.toggleRule([htmlelement],[rulename],[true|false]);

Example:

// Deactivate the rule.nval.toggleRule(document.getElementById("firstName"),"required",false);