Using Advanced Validation

Why use form validation

Form validation is more than just ensuring the user entered something into each element. It can be a crucial asset for users on phones (where a contextual keyboard will pop up on the phone), folks who use screen readers, or people who are just in a hurry and don’t notice minor mistakes.

In all of these cases, having the form pop-up reminders, as soon as it knows what’s wrong, will be a boon for the user.

Let’s dive into validation beyond a basic phone number and brainstorm a few rules about our form.

📝 Inline Error Messages

For the remainder of this chapter, I’ll skip adding the error messages to the form to keep focus on the topic of the section. The CSS you added in the previous lesson still applies here, so you can easily tell whether an input is invalid or not.