popup-validation

Pure JavaScript/CSS library for validating DOM input fields

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