Form Validation Attributes
Apply required, minlength, maxlength, pattern, min, max, and step attributes and style validation states with :valid and :invalid pseudo-classes.
Form Validation Attributes is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Native Browser Validation
HTML5 provides built-in form validation via attributes. When a form is submitted, the browser validates each field. If validation fails, it shows a native error tooltip and prevents submission — no JavaScript needed for basic cases.
required
Adding required to an input, select, or textarea makes it mandatory. The browser shows an error if the field is empty when the form is submitted.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength and maxlength
minlength enforces a minimum character count. maxlength prevents input beyond a maximum. Combine them to enforce password complexity or limit comment lengths.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max, and step for Numeric Inputs
min and max set the valid range for number and date inputs. step sets the increment — useful for ranges (5%, decimal precision, date-only).
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Regular Expression Validation
pattern accepts a JavaScript regular expression. The input must match the pattern for the form to submit. Include a title to describe the expected format in the browser's error tooltip.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Disabling Native Validation
Add novalidate to the <form> element to disable all native browser validation. Do this when you implement custom JavaScript validation so the user gets one consistent experience.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Checking Validity in JavaScript
The Constraint Validation API lets you check validity programmatically: input.validity (ValidityState object), input.checkValidity() (returns boolean), input.setCustomValidity(message) (sets custom error).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Call setCustomValidity(message) with a non-empty string to mark an input as invalid with a custom message. Call it with an empty string to clear the error. Useful for server-validated fields like username uniqueness.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid and :invalid Pseudo-classes
Style valid and invalid inputs with CSS pseudo-classes. Be careful: inputs are :invalid before the user interacts with them. Use :user-invalid (modern browsers) or JavaScript to add an 'touched' class first.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Custom Error Messages with reportValidity
form.reportValidity() triggers the browser's native validation UI on all fields. Use after setting custom validity messages to show them to the user without waiting for a submit event.
Accessible Error Display Pattern
Show inline errors using: 1) aria-invalid="true" on the input, 2) a visible error paragraph linked with aria-describedby, 3) move focus to the first invalid field. This serves all users including screen reader users.
Quick Check
Which attribute limits a text input to a maximum of 280 characters?
Recap: Form Validation Attributes
required, minlength/maxlength, min/max/step, pattern — all provide native browser validation for free. Use novalidate when implementing custom JS validation. The Constraint Validation API gives JavaScript access to validity state. Style errors with :user-invalid after the user has interacted.
Frequently asked questions
Is the “Form Validation Attributes” lesson free?
Yes — the full text of “Form Validation Attributes” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Form Validation Attributes”?
Apply required, minlength, maxlength, pattern, min, max, and step attributes and style validation states with :valid and :invalid pseudo-classes. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Form Validation Attributes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.