Sign Up Form

Community feedback

• 

  P

  Vander Santos•1,750

  @vandermsPosted over 2 years ago

  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.

  1
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge.

  Keep up the good work

  Your solution looks great however I think that the following should be considered

  • the title has a bit too much line-height
  • the title has a bit too much margin from the bottom
  • the banner text is not supposed to wrap likewise the terms and conditions on the form
  • The border on the input fields is supposed to be subtle as seen in the design

  I hope this helps

  Cheers Happy coding 👍

  0