Minimal Form Validation Popup In Pure JavaScript – popup-validation

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


Minimal Form Validation Popup In Pure JavaScript – popup-validation


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.


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

// checkes if is valid (body by default)

// checkes if is valid (body by default) + highlight

// shows a custom message, message);

// hides the message


v3.0.3 (10/07/2018)

  • refactor, IE9 support, build

You Might Be Interested In:

Leave a Reply