# Attribute “pattern” is only allowed when the input type is “email”, “password”, “search”, “tel”, “text”, or “url”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-pattern-is-only-allowed-when-the-input-type-is-email-password-search-tel-text-or-url
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `pattern` attribute provides a powerful way to add client-side form validation directly in HTML without relying on JavaScript. It accepts a regular expression that the browser uses to validate user input before the form is submitted. However, the HTML specification restricts `pattern` to input types where the user enters free-form text. Input types like `number`, `date`, `range`, `color`, and `checkbox` have their own built-in validation mechanisms (such as `min`, `max`, and `step`), so applying a regex pattern to them is meaningless and invalid.

When you add `pattern` to an unsupported input type, browsers will simply ignore it. This means you might think you have validation in place when you actually don't, which can lead to unexpected invalid data being submitted. Removing the invalid attribute also keeps your markup clean and standards-compliant, which benefits accessibility tools and future browser behavior.

### Why certain types don't support `pattern`

- **`number`** — Values are constrained by `min`, `max`, and `step`. The browser enforces numeric input natively.
- **`date`, `time`, `datetime-local`, `month`, `week`** — These use date/time pickers with their own format and range constraints.
- **`range`** — A slider control already constrained by `min`, `max`, and `step`.
- **`checkbox`, `radio`** — These are toggled on/off or selected from a group; a regex pattern doesn't apply.
- **`file`** — File selection is handled by the OS file picker; use the `accept` attribute instead.
- **`color`** — Uses a color picker with a fixed hex format.
- **`hidden`** — Not user-editable, so client-side validation is irrelevant.

### How to fix it

1. **Remove the `pattern` attribute** if the input type already provides sufficient validation through its native controls.
2. **Change the input `type`** to one of the six supported types (`email`, `password`, `search`, `tel`, `text`, or `url`) if you genuinely need regex-based validation.
3. **Use alternative attributes** like `min`, `max`, `step`, or `accept` that are designed for the specific input type.
4. **Use JavaScript validation** if you need custom validation logic that goes beyond what native attributes offer.

## Examples

### ❌ Incorrect: `pattern` on a `number` input

```html
<label for="qty">Quantity (multiples of 5):</label>
<input type="number" id="qty" name="qty" pattern="[0-9]+" min="0" max="100">
```

The `pattern` attribute is not allowed on `type="number"`. Since `min`, `max`, and `step` already handle numeric constraints, `pattern` is unnecessary here.

### ✅ Correct: using `step` instead of `pattern` for number validation

```html
<label for="qty">Quantity (multiples of 5):</label>
<input type="number" id="qty" name="qty" min="0" max="100" step="5">
```

### ❌ Incorrect: `pattern` on a `date` input

```html
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" pattern="\d{4}-\d{2}-\d{2}">
```

The `date` input type already enforces a date format through its native picker, so `pattern` is invalid here.

### ✅ Correct: removing `pattern` from `date` input

```html
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" min="1900-01-01" max="2025-12-31">
```

### ❌ Incorrect: `pattern` on a `checkbox` input

```html
<label>
  <input type="checkbox" name="agree" pattern=".+"> I agree to the terms
</label>
```

### ✅ Correct: using `required` instead of `pattern` for checkbox

```html
<label>
  <input type="checkbox" name="agree" required> I agree to the terms
</label>

```

### ✅ Correct: `pattern` on a supported `text` input

```html
<label for="zip">ZIP code:</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" title="Five digit ZIP code" required>
```

When using `pattern` on a supported input type, always include a `title` attribute that describes the expected format. Browsers display the `title` text as part of the validation error message, helping users understand what input is expected.