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

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

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.