Validator Demo

Validator has been applied to this form to help sanitize and validate user input.
This form won't submit if any fields are invalid and helpful errors will be shown or hidden as the user changes fields.

Install this Validator through npm:

npm install @jdlien/validator

Source code and documentation at github.com/jdlien/validator.

Fields can be required, have a minimum or maximum length, or a pattern.
Numeric inputs won't even allow invalid values to be typed in.

Required

Required But Disabled

Regex Pattern

A letter followed by numbers (^[a-zA-Z]\d+$)

Minimum 8 chars

Maximum

Positive Integers

Up/down arrow keys increment & decrement

Any Number

Negative numbers and decimals are allowed

Dates can be entered by users in almost any format, and will be converted to the format specified in the data-date-format attribute.
Dates can also be constrained to past or future dates.
These features are compatible with datepickers like Flatpickr.

Date

Any date will be converted to the YYYY-MMM-DD format

Past date

YYYY-MM-DD format is enforced

Enter Future date

Date Time

Datetime can be used to also include a time with a date

Past Date Time

Datetime can be used to also include a time with a date

Web Address

This is a text input with a provided error

Tel

A North-American phone number will be formatted on change

US Zip Code

Canadian Postal Code

Time of Day

Anything resembling a time will be converted into the specified format

Color value with picker

The label will show a swatch of any valid color

Selects can be required as well.

Select an option

You can require groups of radio buttons or checkboxes so one must be selected.

Checkbox group

Red

Green

Blue

Radio button group

red

green

blue

Textarea elements can have min and max lengths as well as be required.

Multiple Text Lines

If the form is invalid when submitted, 'form-error-main' will be displayed above.