Summary - Registration validation
Write a registration form full of validation rules.
Summary: The validation toolkit
In this group you met every form validation tool:
requiredblocks empty fieldspatternchecks text formatmin,max,stepbound a numeric valueminlength,maxlengthbound character counttype=email|url|datevalidates the format itselfnovalidateandformnovalidateturn validation off
Now you'll combine them in a sign-up form.
Exercise Write the validated sign-up form
Complete the sign-up form below. It must contain:
- Username:
type="text",minlength="3",maxlength="20",required - Email:
type="email",required - Age:
type="number",min="18",max="120" - Terms of use: a
type="checkbox",required
Add a submit button. Labels are optional.
Show example solution
<form action="/signup" method="post">
<label for="user">Username</label>
<input type="text" id="user" minlength="3" maxlength="20" required>
<label for="email">Email</label>
<input type="email" id="email" required>
<label for="age">Age</label>
<input type="number" id="age" min="18" max="120">
<label for="terms">Terms of use</label>
<input type="checkbox" id="terms" required>
<button type="submit">Sign up</button>
</form>Test yourself
-
Which one forces a username to be at least 3 characters?
- min="3"
- minlength="3"
- max="3"
- step="3"
Show answer
minlength="3" — Correct. minlength="3" asks for at least 3 characters on a text field.
-
Match each attribute to its job
- required
- Blocks empty
- pattern
- Format pattern
- minlength
- Minimum chars
- novalidate
- Disables validation
-
Complete the required email field
<input type="email" id="email" ____>Show answer
<input type="email" id="email" required>