form-validation-kit

form-validation-kit is a small library for handling the validation state of HTML forms.

Demos

Minimal

Single input with a single syncronous validator asserting that input length is an even number.

Minimal demo code

Login

This form demonstrates the library's capabilities. Each input utilizes different features of the library. Details after the demo.

For demo purposes, the state and its history are visualized for each input. It's not part of the library's functionality

Username

Requires at least 1 character as input. Validated synchronously. Initialized with empty string.
Password

Input must be at least 1 character and maximum 2 characters long. Validated synchronouly but delayed by a debouncing, which is indicated by QUEUED state. Requires username to be in VALID state. Initialized with empty string.
Submit

Depends on the validation state of its parent validators, the Username and Password. Button is disabled unless both are VALID. Initializes to the calculated state of parent inputs.
Submission response

Triggered from form submission. Responds asynchronously with delay, indicated by VALIDATING state. Disables form while validation is ongoing. Resolves to VALID or INVALID depending on whether username and password inputs match.

Login demo code

Validation states

Validation can have the following states. If validator depends on other validators, active state is the state with highest precedence (top to bottom in list below) of all the used validators.

ERROR: Validator could not correctly determine the validity of the input
QUEUED: Input received but validator invocation is waiting for throttle cooldown. State is used only if throttling is enabled.
VALIDATING: Validator invoked with latest value from evaluate(). Waiting validator to call done() or error(). State is used only with asynchronous validators.
INVALID: Validator has evaluated input as invalid
VALID: Validator has evaluated input as valid

State transitions for synchronous validators

From	VALID	INVALID	QUEUED	ERROR
	To
VALID
INVALID
QUEUED
ERROR

State transitions for asynchronous validators

From	VALID	INVALID	VALIDATING	QUEUED	ERROR
	To
VALID
INVALID
VALIDATING
QUEUED
ERROR