<input> — HTML5 Validation Attributes
| Since: | HTML5（2014） |
|---|
HTML5 introduced validation attributes that let the browser verify input values without JavaScript. You can specify numeric ranges, character limits, and regular expression patterns using only HTML attributes.
Syntax
<!-- Restrict a numeric range -->
<input type="number" name="age" min="0" max="120" step="1">
<!-- Restrict character count -->
<input type="text" name="name" minlength="2" maxlength="50">
<!-- Validate with a regular expression pattern -->
<input type="text" name="zip" pattern="[0-9]{3}-[0-9]{4}"
placeholder="123-4567">
<!-- Allow multiple email addresses -->
<input type="email" name="cc" multiple>
Attribute List
| Attribute | Description |
|---|---|
| min | Specifies the minimum value allowed. Valid for number and date input types. |
| max | Specifies the maximum value allowed. Valid for number and date input types. |
| step | Specifies the increment interval. Also determines how much the value changes when clicking the spinner arrows on a number input. |
| minlength | Specifies the minimum number of characters allowed. Valid for text-based input types. |
| maxlength | Specifies the maximum number of characters allowed. The user cannot type beyond this limit. |
| pattern | Specifies a regular expression pattern to validate the input value against. Valid for text-based input types. |
| multiple | Allows comma-separated multiple email addresses for the email type, or multiple file selection for the file type. |
Sample Code
sample_input_validation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validation Attributes</title>
</head>
<body>
<form>
<!-- Character limit -->
<p>
<label for="uname">Username (2–20 characters):</label>
<input type="text" id="uname" name="username"
minlength="2" maxlength="20" required>
</p>
<!-- Postal code pattern validation -->
<p>
<label for="zip">Postal code (e.g. 123-4567):</label>
<input type="text" id="zip" name="zipcode"
pattern="[0-9]{3}-[0-9]{4}"
placeholder="123-4567"
title="Enter 7 digits including a hyphen">
</p>
<!-- Numeric range and step -->
<p>
<label for="score">Score (0–100, increments of 5):</label>
<input type="number" id="score" name="score"
min="0" max="100" step="5" value="50">
</p>
<!-- Multiple email addresses -->
<p>
<label for="cc">CC (multiple allowed, comma-separated):</label>
<input type="email" id="cc" name="cc"
multiple placeholder="a@mail.com, b@mail.com">
</p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>
Output
If you enter an invalid value in any field and click "Submit", the browser displays a validation error. For example, entering "1234567" (no hyphen) in the postal code field shows the message: "Enter 7 digits including a hyphen".
Notes
HTML5 validation attributes let the browser automatically verify input values without any JavaScript. If a value fails validation, the form submission is blocked and an error message is shown to the user. Pairing the pattern attribute with the title attribute lets you provide a helpful hint message that guides the user when validation fails.
Browser-side validation can easily be bypassed using developer tools or curl. Always perform security-critical checks (character limits, format rules, invalid data, etc.) on the server side as well. HTML5 validation should be treated as a convenience feature that gives users quick feedback, not as a security boundary.
Numeric range constraints (min/max) are often used together with input type="number" / type="range". For date-type constraints, see the input type="date" family page.
Browser Compatibility
Chrome
4 and later ○3 and earlier ×
Firefox
4 and later ○3 and earlier ×
Safari
5 and later ○4 and earlier ×
Edge12 and later ○
IE11 ○10 ○9 ×
8 ×7 ×
6 ×
Opera
12.1 and later ○11.1 and earlier ×
iOS Safari4 and later ○3 and earlier ×
Android Browser4.4 and later ○4 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○Constraint Validation API and JavaScript
The browser's built-in Constraint Validation API lets you retrieve and customize the validation state using JavaScript.
<form id="signup-form" novalidate>
<div class="field">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<!-- Error message display area -->
<span class="error-msg" id="email-error"></span>
</div>
<button type="submit">Submit</button>
</form>
<script>
var form = document.getElementById('signup-form');
var emailInput = document.getElementById('email');
var emailError = document.getElementById('email-error');
form.addEventListener('submit', function(e) {
// novalidate disables default UI, so we validate manually
if (!form.checkValidity()) {
e.preventDefault();
showErrors();
}
});
emailInput.addEventListener('blur', function() {
// Validate when the input loses focus
if (!emailInput.validity.valid) {
// validity.valueMissing: empty value when required
// validity.typeMismatch: value doesn't match type="email" format
if (emailInput.validity.valueMissing) {
emailError.textContent = 'Please enter your email address.';
} else if (emailInput.validity.typeMismatch) {
emailError.textContent = 'Please enter a valid email address.';
}
emailInput.setAttribute('aria-invalid', 'true');
} else {
emailError.textContent = '';
emailInput.setAttribute('aria-invalid', 'false');
}
});
function showErrors() {
var inputs = form.querySelectorAll('input, select, textarea');
inputs.forEach(function(input) {
if (!input.validity.valid) {
// setCustomValidity() can set a custom error message
input.reportValidity();
}
});
}
</script>
Adding novalidate to the form tag disables the browser's default validation UI. Use this when you want to implement a fully custom validation UI with JavaScript.
If you find any errors or copyright issues, please contact us.
シェアする