← Back to docs

Live Demos

Interactive examples for every built-in validation rule.

Fundamentals

Basic Form

Sign-up form covering required, email, minlength, and equalTo.

Rule · v1.4.0

alpha

Validates that the value contains only alphabetic letters (a–z, A–Z). Digits, spaces, and special characters are rejected.

Rule

required

Ensures a field has a non-empty value after trimming whitespace.

Rule

email

Validates that the value is a properly formatted email address.

Rule

url

Validates that the value is a properly formatted URL.

Rule

date

Validates that the value can be parsed as a valid date.

Rule

dateISO

Validates ISO-like date format: YYYY-MM-DD or YYYY/MM/DD.

Rule · v1.4.0

time

Validates time in H:MM, HH:MM, or HH:MM:SS format.

Rule

minlength / maxlength

Constrains the number of characters allowed in a field.

Rule

pattern

Validates a field against a regular expression.

Rule

equalTo

Confirms two fields have the same value (e.g. password confirmation).

Rule · v1.3.0

notEqualTo

Requires one field to differ from another, such as a new password versus the current password.

Rule

numeric

Accepts only numeric digit characters (0–9).

Rule

range

Validates that a numeric value falls between a minimum and maximum using range: [min, max].

Rule

ipv4

Validates that the value is a properly formatted IPv4 address (e.g. 192.168.1.1).

Rule

ipv6

Validates that the value is a properly formatted IPv6 address (e.g. 2001:db8::1).

Rule

alphanumeric

Accepts only letters, digits, and underscores — no spaces or special characters.

Rule

ishexcolor

Validates that the value is a valid CSS hex color — 3-digit (e.g. #fff) or 6-digit (e.g. #ffffff).

Rule · v1.3.0

maxfiles / maxsize / maxsizetotal

Limits the number of selected files and enforces a per-file size cap for uploads.

Advanced

Custom Rules

Extend the validator with your own rules using addMethod().

Advanced · v1.4.0

Localization

Switch between built-in locales (en, es) and register custom ones at runtime with addLocaleMessages().

Advanced

data-rule-* attributes

Declare rules directly in HTML using data-rule-* and data-msg-* attributes.