Dator. Vali-Dator

Intuitive frontend forms validator based on HTML5 attributes and a tiny bit of JavaScript.

Visitor stats

Code stats

About

There are a lot of form validators out there. This one aims at intuitive API and relies on extensive usage of HTML data-* attributes. It's important to note that in order to use the validation, the required attribute must be present on your HTML element.

Demo

Here is a demo showing how to use the validator and all built-in validation types:

Install

npm i dator

# or

yarn add dator

or include it from unpkg.com

<script src="https://unpkg.com/dator"></script>

Usage

In your JavaScript file:

import { Validator } from 'dator';

const myForm = document.querySelector('form');
const datorSettings = {}; // see below for more details
const datorCustomTypes = {}; // see below for more details

const formValidator = new Dator(myForm, datorSettings, datorCustomTypes);

In your HTML file:

<input type="text" name="full-name" required data-validate="name" />

The constuctor accepts three arguments:

1. DOM element for the form that needs to be validated (Required)
2. Object with settings (Optional) - more below
3. Object with custom validation types - more below

Settings

// These are the settings and their default values
const datorSettings = {
	validClass: 'is--valid', // The CSS classname that will be added to a valid form element
	errorClass: 'is--invalid', // The CSS classname that will be added to an invalid form element
	validatedClass: 'is--validated', // The CSS classname that will be added to the validated form
	watch: true, // If the validation should be applied "as-you-type"
	classHolder: null, // The CSS classname of the element that should receive the `validClass` and `invalidClass`
	beforeValidate: null, // A function to run before the actual form submission
	onSubmit: null, // A function to run during the actual form submission
	afterValidate: null // A function to run after the actual form submission
};

Validation types

There are several built-in validation types:

• name
• zip
• presence
• email
• phone
• address
• integer
• float
• credit-card
• cvc

All of these validation types represent a regular expression which is used to test the value of the form element against to.

In order to add more validatior types, use the third constructor argument as shown above.

For example, if you need to add a new zip type:

const datorCustomTypes = {
	zip: /^\d{4}$/ // Change from 5 digits to 4 digits
};

LICENSE

MIT

                     

Support and sponsor my work: