HTML Input Validation

Required and Length Validation

The required attribute prevents form submission if a field is empty. minlength and maxlength control how short or long the input can be. These built-in checks run entirely in the browser before the form is ever submitted to the server.

Note: Always combine required with a clear placeholder showing the expected format.

Warning: Browser validation is easily bypassed — always validate again on your server.

Example: Required and Length Validation

<input type="text" required minlength="3" maxlength="10">

Pattern Validation

The pattern attribute accepts a regular expression that the input value must match. This lets you validate custom formats like postal codes, product IDs, or usernames. Because pattern only checks structure, you should still validate the same rule again on the server since client-side checks can be bypassed.

Note: Always add a title attribute explaining the required format — browsers show it as the error message.

Warning: Regular expressions in pattern are automatically anchored — you do not need ^ and $ at the start and end.

Example: Pattern Validation

<input type="text" pattern="[0-9]{5}" title="Enter a 5-digit postal code">

Number Range Validation

For number inputs, min and max set the allowed range. The step attribute controls the increment allowed between values. Browsers show a small increment/decrement arrow UI automatically once min, max, and step are set on a number input.

Note: Use step=0.01 for currency inputs to allow decimal values.

Warning: The min and max attributes only work on number, range, date, and time input types.

Example: Number Range Validation

<input type="number" min="1" max="10" step="1">

Email and URL Type Validation

Setting an input's type to email or url makes the browser automatically check that the entered value looks like a valid email address or web address before the form can be submitted, without writing any custom validation logic.

Example: Email and URL Type Validation

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

Custom Validation Messages

The setCustomValidity method, along with the title attribute shown alongside pattern, lets you replace the browser's generic 'Please match the requested format' message with wording that actually explains what the user needs to fix.

Example: Custom Validation Messages

<input type="text" oninvalid="this.setCustomValidity('Please enter your full name')">