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

2.1.1

Source

npm

Version published: 8 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.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 input fields inside of the <body>

validation.init();

Track input fields inside of a 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)

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

Usage

// Show errors
validation.highlight();

// Hide errors
validation.hide();

// Check if container is valid (body by default)
validation.isValid();

// Check if cotnainer is valid (body by default) + highlight
validation.validate();

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="customClassValidation" class="validate-class">
  Click at me to toggle custom class validation
</div>

validation.addClassValidation(".my-class-invalid");

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

Predefined Rules

required
email

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 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.hide(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.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.length === 0 || !isNaN(parseInt(el.value, 10));
  }    
}

HTML

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

validation.addClassValidation(selector) => `self`

Add class validation. For external libraries that can set/remove className of the 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
selector	`string`	Selector that indicates that the field is invalid

Browsers support _{made by godban}

IE / Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Chrome for Android
IE9+	last 12 versions	last 10 versions	last 15 versions	last 14 versions	last 12 versions	last 13 versions

License

MIT

Keywords

FAQs

Package last updated on 20 Aug 2017

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