Built-in validation in HTML

Constraints the browser checks before your JavaScript ever runs.

<form action="/signup" method="post">
  <label for="user">Username</label>
  <input type="text" id="user" name="user" required
         pattern="[a-z0-9_]{3,20}"
         title="Lower case letters, digits and underscores">

  <label for="pw">Password</label>
  <input type="password" id="pw" name="pw" required minlength="12"
         autocomplete="new-password">

  <button type="submit">Create account</button>
</form>

How it works

pattern takes a regular expression the value must match.
title explains the rule when the check fails.
novalidate on the form turns the checks off for testing.

The run, in numbers

Lines: 12
Characters to type: 383
Tokens: 84
Three-star pace: 75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 67 seconds.

Type this snippet

Step 1 of 5 in Validation & submission, step 19 of 25 in Forms & inputs.

← Previous Next →