⏰ 20 mins

In this exercise, let’s create a robust registration form with validation and a submit handler

<aside> 💡 HINT: In your real-world apps you’ll probably use a form validation library like Vee-Validate or FormKit. But this exercise will let you flex your form input binding skills plus other concepts you learned today.

</aside>

Validation rules are as such:
1. Email is required and should be a valid email (you can use this regex to check for a valid email: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
2. password is required
3. confirm password should match password
4. At least one interest should be chosen
5. The user must agree to the terms and conditions

<aside> 💡 Computed props might be handy for checking if a field is valid

</aside>

For any invalid field show an error message and add the input-error class to the input
1. You can do this right away or only after the user has focused and then blurred the input (the latter option is a better user experience but a little more difficult)
On form submit:
1. If the form is valid, console log all the form values
2. if it’s invalid alert “Form is invalid”
By the end of the exercise, you should have something that looks like this

💪 Bonus

If you finish the exercise early, add some password reveal functionality to the password and confirm password field.

💪 Bonus

Helpful Resources