You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →

Book a Demo Install Sign in

popup-validation

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

popup-validation

Pure JavaScript/CSS library for validating DOM input fields

3.0.3

latest

Source

npm

Version published: 7 years ago

Weekly downloads: 8

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

Pure JavaScript/CSS library for validating DOM input fields

Lib Size

Demo

JSFiddle

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
selector	`string`	Selector that indicates that the field is invalid
message	`string`	Optional. "Invalid" by default

Browsers support _{made by godban}

IE / Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Chrome for Android
IE9+	Any	Any	Any	Any	Any	Any

License

MIT

Keywords

FAQs

Package last updated on 11 May 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

popup-validation