@vanderms
Posted
Nice work!
About your question, your solution is fine. The only problem is when the user enters a invalid email, your form doesn't display the custom message. This happens because when there is a invalid email the browser does not call the 'submit' event listener'.
One solution is to use the 'novalidate' attribute in the form. The problem with this approach is that every validation has to be made by you and you don't count anymore with the browser validations.
The other good solution is to use the Contraint Validation API (read https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation) and attach a 'invalid' event listener to the input[type = email]. You can check a example of this approach here: https://codepen.io/vanderms/pen/QWOYLjW .
One problem with the last approach is if you use React, you cannot test with React Testing Library, since apparently the jsdom dependency does not implement the Constraint Validation API.
Conclusions: in this project, if you want just add 'novalidate' to the form and your form will work like the design. For future projects, also if you are interested, studying the Contraint Validation API can improve your work.