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

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