Minimal Form Validation Popup In Pure JavaScript – popup-validation

Preview:

Description:

A lightweight, ES5/ES6 JavaScript library to validate form fields and display error messages in a popup when invalid.

How to use it:

Load the minified version of the popup-validation’s JavaScript and stylesheet in the html document.

<link href="validation.min.css" rel="stylesheet">
<script src="validation.min.js"></script>

Add the validation rules to the form fields using ‘data-validate’ attribute as follows:

<input id="fullName" class="validate" data-validate="required">
<input type="email" id="email" class="validate" data-validate="required, email">
...

Initialize the validator on the form. Done.

validation.init("form");

The library allows you to create your own validation rules as follow:

const Rules = validation.getRules();
Rules["custom"] = {
  message: "Error Message here",
  method: el => {
    // ... rule here ...
  }    
}

<input class="validate" data-validate="required,custom">

API methods.

// shows error messages
validation.highlight(); // show errors
// hides error messages
validation.hideall(); 
// checkes if is valid (body by default)
validation.isValid(); 
// checkes if is valid (body by default) + highlight
validation.validate(); 
// shows a custom message
validation.show(el, message);
// hides the message
validation.hide();

Changelog:

v3.0.3 (10/07/2018)

• refactor, IE9 support, build