Validator reference

required

A value must be given. Works on text inputs, textareas, selects, checkboxes and radio groups.

<input name="name" data-validation="required">
<input type="checkbox" name="terms" data-validation="required">

<select name="plan" data-validation="required">
  <option value="">Choose a plan</option>
  <option>Free</option>
</select>

length

Constrains how long the value is. On a <select multiple> it counts selected options, and on a file input it counts files.

<input data-validation="length" data-validation-length="min4">
<input data-validation="length" data-validation-length="max100">
<input data-validation="length" data-validation-length="50-200">

<!-- At least two options selected -->
<select multiple data-validation="length" data-validation-length="min2">…</select>

email

An email address. Quoted local parts are supported; a quoted section followed by unquoted text is rejected, as RFC 5322 requires.

<input name="email" data-validation="email">

url

An absolute URL. Accepts userinfo, ports, IPv6 literals and internationalised domains.

<input name="site" data-validation="url">

domain

A bare domain name such as example.com, without a scheme or path. Internationalised xn-- top level domains are accepted.

<input name="domain" data-validation="domain">

number

A numeric value. Integers only unless you widen it, with optional range and step constraints.

<!-- Whole numbers -->
<input data-validation="number">

<!-- Decimals, including negatives -->
<input data-validation="number" data-validation-allowing="float,negative">

<!-- Bounded -->
<input data-validation="number" data-validation-allowing="range[1;100]">
<input data-validation="number" data-validation-allowing="range[0.05;0.5],float">

<!-- Comma as the decimal separator -->
<input data-validation="number" data-validation-allowing="float"
       data-validation-decimal-separator=",">

alphanumeric

Letters a–z and digits only. Additional characters can be allowed explicitly.

For letters outside a–z, use letternumeric from the security module.

<input data-validation="alphanumeric">
<input data-validation="alphanumeric" data-validation-allowing="-_">

custom

Test the value against your own regular expression.

<input data-validation="custom" data-validation-regexp="^([a-z]+)$">

date

A calendar date. Leap years and month lengths are checked, and a format need not carry every unit.

<input data-validation="date">
<input data-validation="date" data-validation-format="dd/mm/yyyy">
<input data-validation="date" data-validation-format="mm/yyyy">
<input data-validation="date" data-validation-require-leading-zero="false">

checkbox_group

How many boxes in a group sharing a name must be ticked. Only the first checkbox needs the attributes.

<input type="checkbox" name="topics[]" data-validation="checkbox_group"
       data-validation-qty="1-3">
<input type="checkbox" name="topics[]">
<input type="checkbox" name="topics[]">

strength rescored in 3.0

Password strength on a 0–3 scale, following NIST SP 800-63B rev 4: driven by length, not by character composition.

Only length an attacker actually has to guess counts. Runs (aaaa) and sequences (abcd, 9876) are discounted from the third character on, and passwords that dominate breach corpora score zero however long they are — Password1! and letmein123 included.

<input type="password" data-validation="strength" data-validation-strength="2">

breached new in 3.0 network request

Rejects passwords that appear in the Have I Been Pwned corpus. Opt-in, and it calls out to the network.

The password never leaves the browser. Only the first five hex characters of its SHA-1 are sent; the service returns every suffix sharing that prefix and the match is made locally — the k-anonymity model the API is built around. On the wire it is nothing more than GET /range/5BAA6.

<input type="password" data-validation="strength breached">

confirmation

Two fields must match — the classic "repeat your password" check.

<input type="password" name="pw" data-validation="strength">
<input type="password" name="pw_confirm"
       data-validation="confirmation" data-validation-confirm="pw">

creditcard

A card number: length for the accepted brands, digits only, and a Luhn checksum.

<input name="card" data-validation="creditcard"
       data-validation-allowing="visa,mastercard,amex">

cvv

The card security code. Length follows the brands the form accepts — four digits when it is American Express only, three otherwise.

Put it in the same form as the creditcard field; that is how it learns which brands are in play.

<input name="card" data-validation="creditcard" data-validation-allowing="amex">
<input name="cvv" data-validation="cvv">

server

Hands the value to your backend and uses the response. Asynchronous, so submission waits for the answer.

Respond with JSON: {"valid": true}, or {"valid": false, "message": "Already taken"} to supply your own text.

<input name="username" data-validation="server"
       data-validation-url="/api/username-available">

letternumeric

Letters in any alphabet, plus digits. The Unicode-aware counterpart to alphanumeric.

<input data-validation="letternumeric" data-validation-allowing="-_">

spamcheck

A simple question-and-answer honeypot for casual bot traffic.

<label>What is 2 + 3?</label>
<input data-validation="spamcheck" data-validation-captcha="5">

recaptcha network request

Google reCAPTCHA v2. The widget is rendered for you.

<div data-validation="recaptcha"
     data-validation-recaptcha-sitekey="your-site-key"></div>

complexity deprecated

Composition rules — so many uppercase letters, so many digits, and so on.

time

A time of day in hh:mm.

<input data-validation="time">

birthdate

A date that is neither in the future nor implausibly far in the past.

Fires an ageCalculated event on the field with the computed age.

<input data-validation="birthdate" data-validation-age-range="18-120">

size

Caps the size of the chosen file.

<input type="file" data-validation="size" data-validation-max-size="2M">

mime

Restricts the file by reported MIME type.

<input type="file" data-validation="mime"
       data-validation-allowing="image/png,image/jpeg">

extension

Restricts the file by filename extension.

<input type="file" data-validation="extension"
       data-validation-allowing="jpg,png,pdf">

dimension

Constrains the pixel dimensions, or the aspect ratio, of a chosen image.

Fires an imageValidation event once the image has been measured.

<input type="file" data-validation="dimension"
       data-validation-dimension="min200x200">

<input type="file" data-validation="dimension"
       data-validation-ratio="16:9">

native new in 3.0

Hands the field's own HTML constraints to the browser and reports what ValidityState says.

Answers required, type, min, max, step, pattern, minlength and maxlength from the browser rather than from a regular expression. Messages still come from your configured language, falling back to the browser's own localised text.

Loading the module also mirrors every result onto the element with setCustomValidity(), so element.validity, form.checkValidity() and :user-invalid agree with your data-validation rules. See the module notes.

<input type="email" required data-validation="native">
<input type="number" min="10" max="20" step="2" data-validation="native">
<input pattern="[A-Z]{3}" data-validation="native">

iban

An International Bank Account Number, including its checksum.

<input data-validation="iban">

bic

A Bank Identifier Code, also known as a SWIFT code.

<input data-validation="bic">

sepa

An IBAN that belongs to a country inside the SEPA area.

<input data-validation="sepa">

hex

A hexadecimal colour, #fff or #ffffff.

<input data-validation="hex">

rgb

An rgb(r, g, b) colour.

<input data-validation="rgb">

rgba

An rgba(r, g, b, a) colour.

<input data-validation="rgba">

hsl

An hsl(h, s%, l%) colour.

<input data-validation="hsl">

hsla

An hsla(h, s%, l%, a) colour.

<input data-validation="hsla">

country

A country name, in English.

<input data-validation="country">

federatestate

A US state or a German federal state.

<input data-validation="federatestate">

longlat

A longitude and latitude pair.

<input data-validation="longlat">

swesec

A Swedish personal identity number. sweden module

Fires a genderDerived event with the gender encoded in the number.

<input data-validation="swesec">

swephone

A Swedish telephone number. sweden module

<input data-validation="swephone">

swemobile

A Swedish mobile number. sweden module

<input data-validation="swemobile">

swecounty

An existing Swedish county. sweden module

<input data-validation="swecounty">

swemunicipality

An existing Swedish municipality. sweden module

<input data-validation="swemunicipality">

ukvatnumber

A UK VAT registration number. uk module

<input data-validation="ukvatnumber">

uknin

A UK National Insurance number. uk module

<input data-validation="uknin">

ukutr

A UK Unique Taxpayer Reference. uk module

<input data-validation="ukutr">

cpf

A Brazilian CPF number. brazil module

<input data-validation="cpf">

cep

A Brazilian CEP postal code. brazil module

<input data-validation="cep">

brphone

A Brazilian telephone number. brazil module

<input data-validation="brphone">

plpesel

A Polish PESEL personal identity number. poland module

<input data-validation="plpesel">

plnip

A Polish NIP VAT identification number. poland module

<input data-validation="plnip">

plregon

A Polish REGON business identity number. poland module

<input data-validation="plregon">