popup-validation

Pure JavaScript/CSS library for validating DOM input fields

Demo

JSFiddle

Install

npm install popup-validation --save

Read API

Usage

HTML

  <link href="validation.css" rel="stylesheet">
  <script src="validation.es6.js"></script>
  <!-- Minified ES5 version -->
  <!-- <script src="validation.min.js"></script> -->

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

JavaScript

validation.init();

// Or if you have a form
// Submit event will be prevented if there are any errors
validation.init("#myForm"); 

validation.highlight(); // show errors

validation.hide(); // hide errors

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

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

API

validation.init(el) => void

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

Param	Type	Description
el	Element	Container or <form> Element

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) => void

Deactivate the validation fields inside of the el container

Param	Type	Description
el	Element	Container or <form> Element

validation.hide(el) => void

Hide all errors inside of the el container

Param	Type	Description
el	Element	Container or <form> Element

validation.highlight(el) => void

Highlight all errors inside of the el container

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.getRules() => object

Get the set of the predefined rules

Returns: 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

const Rules = validation.getRules();
Rules["integer"] = {
  message: "Value is not an integer",
  method: el => {
    return el.value.length === 0 || !isNaN(parseInt(el.value, 10));
  }    
}

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

---

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