HTML5 Form Validation

What is HTML5 Form Validation?

HTML5 brought built-in client-side validation to forms.

It means the browser itself checks user input before submitting the form, without JavaScript.

It ensures:

Required fields are filled.
Input matches expected types (email, URL, etc).
Length, patterns, ranges are respected.

Common HTML5 validation features

1️. required

Makes a field mandatory.

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

If left empty, the browser shows: “Please fill out this field.”

2️. type validation

Certain types like email, url, number auto-validate.

<input type="email" name="email" required>

If you enter abc, it will warn: “Please include an '@' in the email address.”

3️. min and max

For number/date range checks.

<input type="number" min="1" max="10">
<input type="date" min="2025-01-01" max="2025-12-31">

4️. minlength and maxlength

Set allowed string length.

<input type="text" minlength="5" maxlength="10">

5️. pattern

Use regex to enforce a custom format.

<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

If input doesn’t match pattern, it shows the title as tooltip.

6️. step

Controls steps for numbers.

<input type="number" min="0" max="10" step="2">

Only accepts 0, 2, 4, 6, 8, 10.

7️. placeholder

Not validation, but helps guide expected input.

<input type="text" placeholder="Enter your name">

8️. novalidate

Turn off browser validation for a form.

<form novalidate>

Example: A complete validated form

<form>
  <label>Name:</label>
  <input type="text" name="name" required><br>

  <label>Email:</label>
  <input type="email" name="email" required><br>

  <label>Password:</label>
  <input type="password" name="password" minlength="6" required><br>

  <label>Age (18-99):</label>
  <input type="number" name="age" min="18" max="99" required><br>

  <label>Website:</label>
  <input type="url" name="website" placeholder="https://example.com"><br>

  <label>Favorite Code (3 letters min):</label>
  <input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters"><br>

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

Try submitting this with missing or invalid data — the browser itself will block submission and show helpful messages.

HTML5 Form Validation

On this page