Minimal Form Validation Popup In Pure JavaScript – popup-validation

Category: Form , Javascript | October 7, 2018
Author: AntonLapshin
Views Total: 3,464
Official Page: Go to website
Last Update: October 7, 2018
License: MIT

Preview:

Minimal Form Validation Popup In Pure JavaScript – popup-validation

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

You Might Be Interested In:


Leave a Reply