HTML provides built-in validation that runs in the browser before form submission.

Required Fields

The required attribute prevents empty submissions:

<input type="text" name="username" required>

The form won’t submit until required fields have values.

Type Validation

Some input types have built-in validation:

<!-- Must be valid email format -->
<input type="email" name="email" required>

<!-- Must be valid URL format -->
<input type="url" name="website">

<!-- Must be a number -->
<input type="number" name="age">

Min and Max Values

For numbers and dates:

<input type="number" name="quantity" min="1" max="100">
<input type="date" name="birthday" min="1900-01-01" max="2024-12-31">

Length Constraints

Limit text input length:

<!-- Minimum length -->
<input type="text" name="username" minlength="3">

<!-- Maximum length -->
<input type="text" name="username" maxlength="20">

<!-- Both -->
<input type="password" name="password" minlength="8" maxlength="128">

Pattern Validation

Use regular expressions for custom validation:

<!-- Only letters, 8 characters -->
<input type="text" name="code" pattern="[a-zA-Z]{8}">

<!-- US phone format -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- URL starting with https -->
<input type="url" name="secure-url" pattern="https://.*">

Validation Messages

Customize the error message with title:

<input
  type="text"
  name="username"
  pattern="[a-z]{4,8}"
  title="4-8 lowercase letters only"
>

Step Validation

For numbers with specific increments:

<!-- Only multiples of 5 -->
<input type="number" name="quantity" step="5" min="0" max="100">

<!-- Allow decimals -->
<input type="number" name="price" step="0.01">

<!-- Any number (disable step validation) -->
<input type="number" name="value" step="any">

Styling Valid/Invalid States

CSS pseudo-classes style validation states:

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

/* Only show invalid after user interaction */
input:invalid:not(:placeholder-shown) {
  border-color: red;
}

Disabling Validation

Skip validation for the entire form:

<form novalidate>
  ...
</form>

Or for a specific submit button:

<button type="submit" formnovalidate>Save Draft</button>

Validation Best Practices

1. Always validate server-side - Client validation can be bypassed
2. Provide clear feedback - Use title for custom messages
3. Don’t over-validate - Allow flexibility when possible
4. Test on mobile - Validation UI varies by device

Example: Registration Form

<form action="/register" method="POST">
  <label for="email">Email:</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  >

  <label for="password">Password:</label>
  <input
    type="password"
    id="password"
    name="password"
    required
    minlength="8"
    title="At least 8 characters"
  >

  <label for="age">Age:</label>
  <input
    type="number"
    id="age"
    name="age"
    min="13"
    max="120"
  >

  <button type="submit">Register</button>
</form>

Lessons in this unit:

0:	Introduction
1:	How to Create HTML Forms
2:	How to Use HTML Text Input Types
3:	▶︎ How to Validate HTML Forms
4:	How to Use Selection Controls in HTML Forms
5:	How to Use Advanced HTML Input Types