popup-validation

3.0.3 • Public • Published

popup-validation

Pure JavaScript/CSS library for validating DOM input fields

Gemnasium Lib Size npm GitHub stars

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>  

JS

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> 

JS

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

JS

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
iOS Safari
iOS Safari
Chrome for Android
Chrome for Android
IE9+ Any Any Any Any Any Any

License

MIT

Package Sidebar

Install

npm i popup-validation

Weekly Downloads

12

Version

3.0.3

License

MIT

Unpacked Size

45.9 kB

Total Files

15

Last publish

Collaborators

  • antvallap