HTML <input> Pattern Attribute

The HTML <input> pattern attribute is used to specify a regular expression that the input field's value must match before the form is submitted. This attribute helps ensure users enter data in a specific format before submitting the form, preventing invalid data entry.

Purpose of the pattern Attribute

The pattern attribute is useful when you need additional validation beyond the standard input types. It works with input types such as text, password, email, search, and url. When a user enters invalid data, the browser prevents form submission and displays a custom error message. This attribute works in conjunction with the title attribute to provide error messages when the input does not match the specified pattern.

Syntax:

<input type="text" pattern="regex_pattern" title="error_message">

• pattern: A regular expression defining the required input format.
• title: A message displayed when the input does not match the pattern.

Implementing the pattern Attribute

The pattern attribute applies to input fields to enforce specific formats using regular expressions. It works with text, password, email, search, and url input types. If the entered data does not match the pattern, the form will not submit, and the title attribute will display an error message. Below are examples demonstrating its usage in different scenarios.

Validating a Phone Number

The following example ensures users enter a 10-digit phone number:

<form>
    <label for="phone">Phone Number:</label>
    <input type="text" id="phone" name="phone" pattern="\d{10}" title="Enter a 10-digit phone number">
    <input type="submit">
</form>

Explanation:

• \d{10}: Ensures the input consists of exactly 10 digits (0-9).
• If the input does not match, the user gets an error message from the title attribute.

Password Input with Minimum Length

This example ensures that the password is at least 8 characters long.

<form>
    <label for="password">Password (Min 8 characters):</label>
    <input type="password" id="password" name="password" pattern=".{8,}" title="Password must be at least 8 characters long" required>
    <input type="submit">
</form>

Explanation:

• .{8,}: Ensures the input contains at least 8 characters of any type.
• The title attribute informs users about the requirement.

Strong Password with Specific Rules

This example enforces a password that must contain at least:

• One uppercase letter (A-Z)
• One lowercase letter (a-z)
• One digit (0-9)
• One special character (e.g., @, #, $)
• Minimum length of 8 characters

<form>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W]).{8,}" 
    title="Must contain at least 8 characters, one uppercase, one lowercase, one number, and one special character.">
    <input type="submit">
</form>

Explanation:

• (?=.*\d): Ensures at least one digit (0-9).
• (?=.*[a-z]): Ensures at least one lowercase letter (a-z).
• (?=.*[A-Z]): Ensures at least one uppercase letter (A-Z).
• (?=.*[\W]): Ensures at least one special character (@, #, $, etc.).
• .{8,}: Ensures the password is at least 8 characters long.

Email Validation with Custom Pattern

Although the email input type has built-in validation, you can enhance it with a custom pattern.

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" 
    pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$" 
    title="Enter a valid email address (e.g., [email protected])" required>
    <input type="submit">
</form>

Explanation:

• [a-z0-9._%+\-]+: Matches the username part before @ (lowercase letters, numbers, and special characters like . or _).
• @[a-z0-9.\-]+: Matches the domain name.
• \.[a-z]{2,}$: Ensures the top-level domain (TLD) contains at least two lowercase letters (e.g., .com, .org).

Search Input Without Single or Double Quotes

This example prevents users from entering single (') or double (") quotes in a search input field.

<form>
    <label for="search">Search:</label>
    <input type="search" id="search" name="search" pattern="[^'\"]+" 
    title="Search cannot contain single or double quotes" required>
    <input type="submit">
</form>

Explanation:

• [^'"]+: Matches any characters except single (') and double (") quotes.
• This pattern ensures the user cannot enter quotes in the search field.

URL Input That Must Start with "http://" or "https://"

This example ensures that a URL starts with http:// or https://.

<form>
    <label for="url">Website URL:</label>
    <input type="url" id="url" name="url" 
    pattern="https?://.+" 
    title="URL must start with http:// or https://" required>
    <input type="submit">
</form>

Explanation:

• https?://: Matches either http:// or https:// (the ? makes s optional).
• .+: Ensures at least one character appears after the protocol.

ZIP Code Validation (India & US)

This pattern ensures users enter a valid ZIP code:

• US ZIP code: 12345 or 12345-6789
• Indian PIN code: 560001

<form>
    <label for="zip">ZIP Code:</label>
    <input type="text" id="zip" name="zip" 
    pattern="^\d{5}(-\d{4})?$|^\d{6}$" 
    title="Enter a 5-digit US ZIP code or a 6-digit Indian PIN code">
    <input type="submit">
</form>

Explanation:

• ^\d{5}(-\d{4})?$: Matches US ZIP codes (either 12345 or 12345-6789).
• ^\d{6}$: Matches Indian PIN codes (6 digits like 560001).
• The | (pipe) acts as an OR operator to allow either pattern.

Conclusion

In this tutorial, you have learned how to use the HTML <input> pattern attribute to enforce custom validation rules for form inputs. You explored different use cases, including validating phone numbers, passwords, emails, search fields, URLs, and ZIP codes.

Key Takeaways:

• The pattern attribute uses regular expressions to define input rules.
• It works with input types such as text, password, email, search, and url.
• The title attribute provides a custom error message when the input does not match the pattern.
• It helps ensure data accuracy and enhances user experience.
• The pattern attribute reduces reliance on JavaScript for simple form validations.

By implementing the pattern attribute correctly, you can improve form validation and prevent incorrect data entry, making web forms more efficient and user-friendly.