NVal - jQuery Validation-like vanilla js validator
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
src
.gitignore
README.md
index.ts
package.json
process-dts.js
tsconfig.json
webpack.config.js

README.md

npm version npm downloads

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.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):

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

Then: (TypeScript)

var nval = new NVal(document.getElementById("myForm") as HTMLFormElement);

(JavaScript, using scripts tag)

var nval = new NVal.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-[rule]="true" Assign rule to the element (input/textarea/etc.).
data-msg-[rule]="[message]" Define message for the rule.
data-error="#[elementId]" Define error placement container.

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: [array of the 'FieldTypes'], // Type of the elements.
                instance: {
                    name: [rule name], // 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 {
                        var element = elements[0] as HTMLInputElement;
                        var val = element.value;
                        if (val == null || val === "")
                            return ValidationResult.createOk(elements);
                        if (val.toLowerCase() === "agreed")
                            return ValidationResult.createOk(elements);
                        return ValidationResult.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([html element],
            [
                {
                    instance: {
                        name: [rule name],
                        apply(elements: HTMLElement[], errorMessage: string): ValidationResult {
                            // Your code here...
                        }
                    },
                    errorMessage: [error message],
                    isActive: [true | false]
                }
            ]);

Example:

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

Assign existing rule to the element

nval.assignExistingRule([html element], [rule name], [error message]);

Example:

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

Toggle rule

nval.toggleRule([html element], [rule name], [true | false]);

Example:

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