pattern

Learn how to use the HTML pattern attribute for client-side validation and understand when to choose it over the required attribute.

What it is

The pattern attribute specifies a regular expression that an input field's value must match to be considered valid. It provides fine-grained control over data format, such as enforcing specific character sets or lengths. The regex is applied implicitly with anchors (^ and $), meaning the entire string must match the pattern, not just a substring. Related terms include "client-side validation," "regular expressions," and "input constraints."

Why it matters

• Prevents invalid data entry before submission, improving user experience.
• Enforces strict formatting rules (e.g., phone numbers, zip codes) without JavaScript.
• Reduces server load by catching obvious errors early.
• Provides immediate visual feedback via browser-native styling (e.g., red borders).

Syntax or steps

Add the pattern attribute to an <input> element. The value must be a valid JavaScript regular expression literal, excluding the surrounding slashes (/). For example, to allow only three digits, use pattern="[0-9]{3}".

Example

<form>
  <label for="zip">Zip Code:</label>
  <input type="text" id="zip" name="zip" pattern="[0-9]{5}" title="Five digit zip code" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form>

In this example, the zip input requires exactly five digits due to pattern="[0-9]{5}". The title attribute provides a helpful tooltip if validation fails. The email input uses the built-in type="email" validation instead of a custom pattern, which is often more robust for complex formats.

Common mistakes

• Forgetting anchors: Unlike JS regex literals, HTML patterns are automatically anchored. Do not add ^ or $ manually unless necessary for clarity, but know they are implied.
• Using unsupported syntax: Lookaheads (?=...) and lookbehinds (?<=...) are not supported in HTML pattern attributes. Stick to basic character classes and quantifiers.
• Ignoring empty values: If a field is optional, an empty string passes validation even if a pattern is set. Use required alongside pattern if the field cannot be empty.
• Overly complex patterns: Complex regexes can be hard to maintain. Prefer simple types like type="number" or type="email" when possible.

When to use it

Use pattern for specific format enforcement where standard input types fall short. Use required simply to ensure a field is not empty.

Practice

Guided Exercise: Create an input field that accepts only uppercase letters A-Z, at least 4 characters long. Hint: Use [A-Z]{4,}.

Challenge: Modify the exercise to also require the string to start with 'X'. Expected pattern: X[A-Z]{3,}.

Quick check

Question: Does pattern="[a-z]+" validate an empty input field?

Answer: No, if the field is not marked required, an empty string is considered valid because it does not violate the pattern constraint (the pattern applies only when there is content).

Summary

The pattern attribute enables declarative, regex-based validation directly in HTML. Combine it with required for comprehensive checks, but prefer native input types for common formats to ensure better compatibility and simpler maintenance.