HTML form validation: a complete guide

Form validation ensures users provide correct, complete data before submission. HTML5 provides a comprehensive set of validation attributes that work natively in every modern browser, without any JavaScript.

This guide covers every validation attribute, how to combine them, and when to add custom validation on top.

HTML5 validation attributes

required

The required attribute prevents form submission when the field is empty:

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

The browser shows a tooltip like “Please fill out this field” when the user tries to submit.

type

The input type attribute provides built-in format validation:

1
<input type="email" name="email" required />
2
<input type="url" name="website" />
3
<input type="number" name="quantity" min="1" max="100" />

minlength and maxlength

Restrict the character count of text inputs:

1
<input type="text" name="username" minlength="3" maxlength="30" required />
2
<textarea name="bio" minlength="10" maxlength="500"></textarea>

min and max

Restrict numeric ranges:

1
<input type="number" name="age" min="18" max="120" />
2
<input type="date" name="appointment" min="2026-01-01" />
3
<input type="range" name="rating" min="1" max="5" />

step

Control the increment for numeric inputs:

1
<input type="number" name="price" min="0" step="0.01" />
2
<input type="time" name="meeting" step="900" />

pattern

The pattern attribute accepts a JavaScript regular expression:

1
<input type="text" name="zip" pattern="[0-9]{5}" title="Enter a 5-digit ZIP code" required />

Always include a title attribute with pattern so the browser can show a helpful error message.

Common validation patterns

Email with domain restriction

1
<input
2
  type="email"
3
  name="email"
4
  pattern="^[^@\s]+@company\.com$"
5
  title="Use your @company.com email address"
6
  required
7
/>

Phone number (international)

1
<input
2
  type="tel"
3
  name="phone"
4
  pattern="\+?[0-9\s\-\(\)]{7,20}"
5
  title="Enter a valid phone number"
6
/>

URL with protocol

1
<input
2
  type="url"
3
  name="website"
4
  pattern="https?://.+"
5
  title="Enter a URL starting with http:// or https://"
6
/>

Password strength

1
<input
2
  type="password"
3
  name="password"
4
  minlength="8"
5
  pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
6
  title="At least 8 characters with uppercase, lowercase, and a number"
7
  required
8
/>

US ZIP code

1
<input
2
  type="text"
3
  name="zip"
4
  pattern="[0-9]{5}(-[0-9]{4})?"
5
  title="Enter a 5-digit or 9-digit ZIP code"
6
/>

Styling validation states with CSS

Browsers apply pseudo-classes to inputs based on their validation state:

1
input:valid {
2
  border-color: #22c55e;
3
}
4

5
input:invalid {
6
  border-color: #ef4444;
7
}
8

9
input:required {
10
  border-left: 3px solid #059669;
11
}
12

13
input:user-invalid {
14
  border-color: #ef4444;
15
  background: #fef2f2;
16
}

The :user-invalid pseudo-class (supported in modern browsers) only applies after the user has interacted with the field, avoiding red borders on page load.

Custom validation with JavaScript

For validation logic that goes beyond what HTML attributes can express, use the Constraint Validation API:

1
const email = document.getElementById("email");
2

3
email.addEventListener("input", () => {
4
  if (email.validity.typeMismatch) {
5
    email.setCustomValidity("Please enter a valid email address.");
6
  } else if (email.value && !email.value.endsWith("@company.com")) {
7
    email.setCustomValidity("Only @company.com addresses are allowed.");
8
  } else {
9
    email.setCustomValidity("");
10
  }
11
});

Call setCustomValidity("") with an empty string to clear the error and mark the field as valid.

Checking validity before submission

1
document.querySelector("form").addEventListener("submit", (e) => {
2
  const form = e.target;
3
  if (!form.checkValidity()) {
4
    e.preventDefault();
5
    form.reportValidity();
6
  }
7
});

Disabling native validation

To disable HTML5 validation entirely (useful when implementing custom validation UI):

1
<form novalidate>
2
  <!-- fields -->
3
</form>

With novalidate, the form submits regardless of validation state. You handle all validation in JavaScript.

Server-side validation

Client-side validation improves user experience but can be bypassed. Always validate on the server or form backend as well:

• Type checking: Ensure email fields contain valid emails
• Length limits: Enforce maxlength server-side
• File validation: Check MIME types, file sizes, and scan for malware
• Domain restrictions: Only accept submissions from allowed origins
• Rate limiting: Prevent abuse from a single IP

A form backend service like FormsFort handles server-side validation automatically, including MIME type checking, file scanning, and domain restriction enforcement.

Accessibility considerations

• Always associate <label> elements with inputs using the for attribute
• Use aria-describedby to link error messages to their fields
• Use aria-invalid="true" on fields that fail validation
• Use aria-live="polite" on error message containers so screen readers announce changes

1
<label for="email">Email</label>
2
<input type="email" id="email" name="email" required aria-describedby="email-error" />
3
<span id="email-error" role="alert" aria-live="polite"></span>

Summary

HTML5 provides a complete validation system that works without JavaScript. Use required, type, pattern, minlength, maxlength, min, max, and step to validate most form inputs. Style validation states with CSS pseudo-classes. Add custom JavaScript validation with the Constraint Validation API when HTML attributes are not sufficient. Always enforce validation on the server side or through your form backend service.