Popup-validation NPM

popup-validation

Pure JavaScript/CSS library for validating DOM input fields

Lib Size

npm.io

Install

npm install popup-validation --save

Read API

Usage

HTML

<link href="validation.min.css" rel="stylesheet">
<script src="validation.min.js"></script> 

<div>
  <label for="email">Email:</label>
  <input type="email" id="email" class="validate" 
         data-validate="required,email" />
</div>

Initialization

Track all the input fields inside of the <body>

validation.init();

Track all the input fields inside of a DOM container or a <form>. Submit event will be prevented if there are any errors

validation.init("#myForm");

Set options: trigger events (when popups should be shown). "change", "paste", "blur", "keyup" by default.

validation.init("#myForm", {
  events: ["change", "paste", "keyup"]
});

Usage

// Show errors
validation.highlight();

// Hide all errors
validation.hideAll();

// Check if all the input fields inside of a container are valid (body by default)
validation.isValid(); // returns true or false

// isValid() + highlight()
validation.validate(); // returns true or false

// Show a custom popup message on any DOM element
validation.show(el, message);

// Hide the popup message from the DOM element
validation.hide(el);

Custom Class Validation

Some services like Braintree use iframes to control the inputs on a page. That also can be useful if some javascript logic sets and removes a certain class to/from a div or input field that indicates that the field is not validated.

HTML

<div id="my_id">
  Click at me to toggle custom class validation
</div>

validation.addClassValidation("#my_id", ".my-class-invalid", 'Validation Message');

// Test
document.getElementById("my_id").addEventListener("click", e => {
  e.target.classList.toggle("my-class-invalid");
});

Predefined Rules

required
email
emails ("," or ";" delimiter)

The set of rules can be easily extended. Please take a look at the example

API

validation.init(el, options) => self

Initialize the validation fields inside of the el container. If el is a <form> element then the submit event will be prevented if there are any errors

Returns: object - Self validation instance for chain calls

Param	Type	Description
el	Element	Container or `<form>` Element
options	Object	Optional Set of the properties

Default Options

{
  events: ["change", "paste", "blur", "keyup"]
}

Affects all input fields with validate class

data-validate attr can contain the list of the rules

Example:

<input class="validate" data-validate="required" />
<input type="email" class="validate" data-validate="required,email" />

validation.destroy(el) => self

Deactivate the validation fields inside of the el container

Returns: object - Self validation instance for chain calls

Param	Type	Description
el	Element	Container or `<form>` Element

validation.hideAll(el) => self

Hide all errors inside of the el container

Returns: object - Self validation instance for chain calls

Param	Type	Description
el	Element	Container or `<form>` Element

validation.highlight(el) => self

Highlight all errors inside of the el container

Returns: object - Self validation instance for chain calls

Param	Type	Description
el	Element	Container or `<form>` Element

validation.isValid(el) => boolean

Check if all input fields inside of the el container are valid

Returns: boolean - True if all input fields inside of the container are valid

Param	Type	Description
el	Element	Container or `<form>` Element

validation.validate(el) => boolean

Validate all input fields inside of the el container

Returns: boolean - True if all input fields inside of the container are valid

Param	Type	Description
el	Element	Container or `<form>` Element

validation.show(el, message) => void

Show a custom popup message on a DOM element

Param	Type	Description
el	Element	DOM element
message	string	Custom message

validation.hide(el) => void

Hide the shown custom popup message from the DOM element

Param	Type	Description
el	Element	DOM element

validation.rules object

The set of the predefined rules

Rule signature

el => boolean

Param	Type	Description
el	Element	input field

Returns: boolean - True if the field is validated

Example of extending rules

validation.rules["integer"] = {
  message: "Value is not an integer",
  method: el => {
    return el.value === "" || /^-?\d+$/.test(el.value);
  }    
}

HTML

<input class="validate" data-validate="required,integer" />

validation.addClassValidation(target, selector, message) => self

Add class validation. For external libraries that can set/remove className of an element. For instance, braintree-hosted-fields-invalid class is set by braintree client library when iframe with the input field detects an error, More info here: https://developers.braintreepayments.com/guides/hosted-fields/styling/javascript/v2

Returns: object - Self validation instance for chain calls

Param	Type	Description
target	string	Element	Target DOM element where popup should be shown on
selector	string	Selector that indicates that the field is invalid
message	string	Optional. "Invalid" by default