Module 6: Forms · Lesson 6 of 7
HTML Form Validation: required, minlength, min, max
All lessons in Module 6
Goal: Have the browser check answers with required, length and range rules.
Learn
A browser can check a form before sending it, and you don't write a line of code. You add rules as attributes. When one fails, the browser blocks the submit and points at the problem:
requiredmeans the field can't be left empty. It takes no value, so the word alone does it.minlengthandmaxlengthset the shortest and longest text allowed.minandmaxset the lowest and highest number or date.type="email"accepts only text shaped like an email address.
Visitors get quick, friendly feedback. There is a limit, though. These checks guide honest users, and anyone can get around them, so the server receiving the data has to check everything again. The HTML standard calls these rules form constraints (opens in a new tab).
The short version
- Validation rules are ordinary attributes, checked by the browser before the form is sent.
requiredblocks empty fields. Length and range rules kick in only after something is typed.minlengthandmaxlengthlimit text length, andminandmaxlimit numbers and dates.- Built-in checks help honest visitors. The server still has to validate every value it receives.
Example
<form>
<label for="code">Discount code</label>
<input type="text" id="code" name="code" required minlength="6" maxlength="6">
<button type="submit">Apply</button>
</form>Your task
At the moment the Junior Coders Club form takes any answer at all. Give it some rules:
- Make the nickname and the email
required. - A nickname must have 3 to 15 characters, so add
minlength="3"andmaxlength="15". - Members are 8 to 14 years old. Add
min="8"andmax="14"to the age box.
Now play troublemaker. Submit it empty, then try the nickname ab, then age 30.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<input type="number" id="age" name="age" maxlength="2">Right
<input type="number" id="age" name="age" min="8" max="14">Number inputs ignore maxlength, so limit the value itself with min and max.
Wrong
<input type="text" id="nick" name="nick" required="false">Right
<input type="text" id="nick" name="nick">Because required is a boolean attribute, it is on whenever it appears, even as required="false", so delete it to make a field optional.
Go deeper
For a custom rule, the pattern attribute takes a regular expression that has to match the whole value. pattern="[A-Z]{3}[0-9]{3}", for example, accepts a code like ABC123. The browser's message only says the format doesn't match, so explain the format with a title or, better, with visible help text. To play with patterns and other validation attributes, HTMLInput's input generator (opens in a new tab) builds the tag as you pick options.
CSS can react to validity. The :invalid and :valid selectors style fields as their state changes. The newer :user-invalid waits until the visitor has touched a field, so an untouched form doesn't open covered in red.
Browser messages disappear after a moment and look different in every browser. Mark required fields in the visible label as well, for example "Email (required)", so everyone knows the rules before submitting. When an error does happen, WCAG success criterion 3.3.1, Error Identification (opens in a new tab), asks for it to be described in text.
And the server check? Anyone can open developer tools, delete the required attribute and submit, or post data straight to the action address without loading your page. The browser's checks save visitors time. Only the server's checks protect your data.
Frequently asked questions
How do I make a field required in HTML?
Add the required attribute to the input, select or textarea: <input type="email" name="email" required>. Submit with the field empty and the browser stops the form, moves focus to the field and shows a message. On a checkbox, required means it has to be ticked, which is what an "I agree to the terms" box wants.
How do I validate a form without JavaScript?
With HTML's built-in validation attributes. You have required, minlength, maxlength, min, max and step, a fitting type such as email or url, and pattern for a custom format written as a regular expression (opens in a new tab). On submit, the browser checks every one and shows its messages in the visitor's own language. No script involved.
Why is my HTML form validation not working?
There are a few usual suspects. Length and range rules ignore an empty field unless it is also required. A novalidate attribute on the form, or formnovalidate on the button, turns every check off. Make sure the rule sits on the right element, and that the input really is inside the <form> being submitted (see forms and inputs).