Skip to content

scriptex/html5-form-validator

Repository files navigation

Travis CI Github Build Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics

HTML5 Form Validator

The simplest HTML5 forms validator.

This form validator uses the built-in capabilities of the browser to validate the required form fields.

All validation messages are shown as they are shown by the browser which means that they are internationalized and are NOT subject to change.

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit

Install

npm i html5-form-validator

or

yarn add html5-form-validator

Usage

import { HTML5FormValidation } from 'html5-form-validator';

Then initialize with default settings:

new HTML5FormValidation();

or supply your own

const form = document.querySelector('#form');

new HTML5FormValidation(form, {
	errorElement: 'form__error',
	invalidClass: 'is--invalid',
	submitHandler(instance) {
		console.log(instance);
	},
	validateOnInput: false
});

Options

Option Type Required Default Description
errorElement string false 'error' The class name of the element that will be added to the DOM after the required field.
invalidClass string false 'invalid' The classname of the required field when it is invalid
submitHandler Function false null A function to run on form submission. Accepts a single argument - the HTML5FormValidation instance.
validateOnInput boolean false true Validate as you type. Set to false to validate only on submit.

LICENSE

MIT


Connect with me:

                     

Support and sponsor my work: