Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive design using tailwind css and nextjs routing

@Genesys-jr

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I don't know how to go about the error states if a valid email is not entered. I need a feedback about it

Community feedback

Deepak 190

@itsdevdeepak

Posted

There are basally 3 patters to handle error states.

  1. Live validation errors: In this approach error state will visible as user type.
  2. Show error state after input is unfocusable: like the name show the input error state after user provides the value and leaves the input focus.
  3. Show the error state for all the input fields after user click on submit button.

You could use css class and add/remove it depending on your validation or you could also use ternary operator to hide or unhide the element. for validation use you could use regex or manual validation.

you can read more from this article

If you have any questions feel free to leave below.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord