Form Validation

Learning objectives#

• Use required, minlength, maxlength, min, max and pattern
• Choose input types that validate automatically
• Style valid and invalid fields
• Understand why server-side validation is still required

Explanation#

HTML input types such as email, url and number come with built-in validation. Attributes like required and minlength add further rules.

When the user submits, the browser checks every field. If one fails, submission is blocked and a message is shown next to the first invalid field.

Client-side validation is a convenience for users, not a security measure. Anyone can bypass it, so your server must always validate the data again.

Syntax#

1<input type="email" name="email" required>
2<input name="username" minlength="3" maxlength="20" pattern="[a-z0-9_]+">

Code example: A sign-up form with native validation#

1<style>
2  label { display:block; margin-top:12px; font-family:sans-serif; }
3  input:user-invalid { border:2px solid #dc2626; }
4  input:user-valid { border:2px solid #16a34a; }
5</style>
6<form>
7  <label for="name">Username (3–20 lowercase letters or digits)</label>
8  <input id="name" name="username" required minlength="3" maxlength="20" pattern="[a-z0-9]+">
9

10  <label for="email">Email</label>
11  <input id="email" name="email" type="email" required>
12

13  <label for="age">Age</label>
14  <input id="age" name="age" type="number" min="13" max="120">
15

16  <p><button>Create account</button></p>
17</form>

Submitting with empty or invalid fields shows browser error messages; fields turn red or green after you interact with them.

Step-by-step explanation#

1. Each <label for> is linked to an input id, so clicking the label focuses the field and screen readers announce it.
2. required blocks submission while the field is empty.
3. minlength, maxlength and pattern restrict the username. pattern is a regular expression the whole value must match.
4. type="email" checks for a plausible email address.
5. min and max on a number input enforce a range.
6. :user-invalid only applies after the user has interacted, so the form does not start out red.

Real-world use case#

Common mistakes#

Best practices#

• Pair every input with a <label>
• Use the most specific input type
• Explain the rule in the label or hint text, not only in the error
• Validate again on the server

Remember this#

Practice exercise#

1<label for="pw">Password (at least 8 characters)</label>
2<input id="pw" name="password" type="password" required minlength="8" autocomplete="new-password">
3

4<label for="pw2">Confirm password</label>
5<input id="pw2" name="confirm" type="password" required minlength="8" autocomplete="new-password">

Mini quiz#

Want more? Practise all HTML MCQs · HTML interview questions

Related topics#

My notes#

Saved in this browser.