Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a regular expression that an input element's value is checked against in HTML?
The pattern attribute in HTML allows you to specify a regular expression that validates an input element's value before form submission. This attribute provides client-side validation by checking if the entered value matches the specified pattern.
The pattern attribute works with input types including text, password, email, search, url, and tel. When a user submits a form, the browser automatically validates the input against the pattern and displays an error message if the value doesn't match.
Syntax
Following is the syntax for the HTML <input> pattern attribute −
<input type="text" pattern="regular_expression" title="Description">
Where regular_expression is a valid JavaScript regular expression pattern, and the title attribute provides a helpful description that appears in the validation message.
Password Validation
The type="password" attribute creates a secure text field where characters are masked with dots or asterisks. Combined with the pattern attribute, you can enforce password strength requirements.
Example − Minimum Length Password
Following example demonstrates password validation requiring at least 8 characters −
<!DOCTYPE html>
<html>
<head>
<title>Password Pattern Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Create Password</h2>
<form action="#">
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"
pattern=".{8,}"
title="Password must be at least 8 characters long"
style="padding: 8px; margin: 5px 0; width: 200px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 15px;">
</form>
</body>
</html>
If you enter fewer than 8 characters and try to submit, the browser displays a validation message. The pattern .{8,} means any character repeated 8 or more times.
Create Password
Password: [????????] (masked input field)
[Submit]
(Shows validation error if less than 8 characters)
Example − Strong Password Pattern
Following example shows a more complex password pattern requiring uppercase, lowercase, digit, and special character −
<!DOCTYPE html>
<html>
<head>
<title>Strong Password Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Secure Password</h2>
<form action="#">
<label for="secure-password">Password:</label><br>
<input type="password" id="secure-password" name="secure-password"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
title="Password must contain at least 8 characters including uppercase, lowercase, number, and special character"
style="padding: 8px; margin: 5px 0; width: 250px;"><br><br>
<input type="submit" value="Create Account" style="padding: 8px 15px;">
</form>
</body>
</html>
This pattern ensures the password contains all required character types for better security.
Text Input Restrictions
You can restrict text inputs to specific formats using character classes and quantifiers in regular expressions.
Example − Three Letter Country Code
Following example restricts input to exactly three alphabetic characters −
<!DOCTYPE html>
<html>
<head>
<title>Country Code Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Enter Country Code</h2>
<form action="#">
<label for="country">Country Code (3 letters):</label><br>
<input type="text" id="country" name="country"
pattern="[A-Za-z]{3}"
title="Please enter exactly 3 letters (e.g., USA, IND, GBR)"
placeholder="USA"
style="padding: 8px; margin: 5px 0; width: 100px; text-transform: uppercase;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 15px;">
</form>
</body>
</html>
The pattern [A-Za-z]{3} accepts exactly three letters (uppercase or lowercase). Numbers and special characters are rejected.
Enter Country Code
Country Code (3 letters): [USA]
[Submit]
(Validates only 3-letter alphabetic codes)
Example − Phone Number Pattern
Following example validates a US phone number format −
<!DOCTYPE html>
<html>
<head>
<title>Phone Number Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Phone Number</h2>
<form action="#">
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone"
pattern="\(\d{3}\) \d{3}-\d{4}"
title="Please enter phone number in format: (123) 456-7890"
placeholder="(123) 456-7890"
style="padding: 8px; margin: 5px 0; width: 180px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 15px;">
</form>
</body>
</html>
This pattern \(\d{3}\) \d{3}-\d{4} enforces the format (123) 456-7890 with parentheses, space, and hyphen in the correct positions.
Email Validation Pattern
While type="email" provides basic email validation, you can add a custom pattern for more specific requirements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Email Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Company Email Only</h2>
<form action="#">
<label for="email">Company Email:</label><br>
<input type="email" id="email" name="email"
pattern="[a-zA-Z0-9._%+-]+@company\.com$"
title="Please enter a valid @company.com email address"
placeholder="user@company.com"
style="padding: 8px; margin: 5px 0; width: 220px;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 15px;">
</form>
</body>
</html>
This pattern restricts email addresses to only those ending with @company.com.
Common Pattern Expressions
Following table shows commonly used regular expression patterns for input validation −
| Pattern | Description | Example Match |
|---|---|---|
[A-Za-z]{3} |
Exactly 3 letters | USA, abc, XYZ |
\d{4} |
Exactly 4 digits | 1234, 9876 |
[0-9]{3}-[0-9]{4} |
3 digits, hyphen, 4 digits | 123-4567 |
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ |
Valid email format | user@example.com |
^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$ |
Strong password | Password1 |
^[A-Z]{2}[0-9]{6}$ |
2 letters + 6 numbers | AB123456 |
Browser Support and Validation
The pattern attribute is supported by all modern browsers. When validation fails, the browser displays a default message that includes the title attribute content. The validation occurs when the user attempts to submit the form.
Important Notes:
-
Always include a
titleattribute to provide clear error messages to users. -
Client-side validation with patterns should be supplemented with server-side validation for security.
-
The pattern attribute is case-sensitive unless you include both uppercase and lowercase in character classes.
-
Use the
placeholderattribute to show users the expected format.
Conclusion
The HTML pattern attribute provides powerful client-side validation using regular expressions. It works with various input types to enforce specific formats for passwords, text fields, emails, and phone numbers. Always combine the pattern attribute with descriptive titles and consider adding server-side validation for comprehensive form security.
256 Views
