Submitted over 4 years ago

Basic page using html and css

Dave• 5,245

@dwhenson

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Is there a way to better style the input error? Two issues that I can see:

I would like to delay verification so that you at least have a few moments to type rather than getting an error immediately. Is this possible, or at least to only verify on 'submit'
The error looks rubbish on chrome as the border radius doesn't seem to have worked. Is there a way to address this? E.g. adding pre-fixes or some other method to solve things.

Any other comments or suggestions on how the code could be improved would be highly appreciated.

Thanks!

Community feedback

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Hi Dave, great work on completing this challenge! You could definitely delay the validation by using JavaScript to listen out for a submit event on the form element. You could then check the value of the input to make sure it's an email address before submitting.

Using JS you could also then add a class that would then show the error state (like in the design) and remove it when a user provides a valid email address.

Let me know if you have any questions 🙂

Dave• 5,245

@dwhenson

Posted over 4 years ago

Thanks Matt, I've not yet started to learn JS, but I'll be getting to it before too long I hope!

Please log in to post a comment

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