Lesson 2 of 8
Form validation
- 14 min
- 5 checks
- 3 hints
- Go to task
Goal
Validate before you submit
01
Explanation
The browser can validate fields on its own: required keeps a field from being left empty, type="email" checks that the value looks like an email address, and minlength sets a minimum length, all without a single line of JavaScript.
That leaves two things for you: stop the default submission with event.preventDefault() so the page doesn't reload, and show the user a result they can understand.
With form.checkValidity() you ask the browser whether every field is valid, and base your response on its answer.
02
Your task
Make the email field required and set its type to email, stop the page from reloading, and show a message in #msg.
Checks
5 checks- The field is of type email
- The field is required
- The default submission is blocked, so the page doesn't reload
- A valid email shows a success message
- An invalid email shows a different message