Skip to content
Submitted 7 days ago

Email_validation_page

CasperTheChild•130
@CasperTheChild
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of understanding more about how JavaScript works and being able to write it myself :D

What challenges did you encounter, and how did you overcome them?

I couldn't use input:invalid::before, so I opted for an alternative method.

What specific areas of your project would you like help with?

I couldn't display the 'Valid email required' message using input:invalid::before. Even AI assistants couldn't help me...

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 6 days ago

    Hey CasperTheChild,

    I don't think there is way to do what you want with css for your code but it is possible. You can use this

    input:not(:placeholder-shown):invalid + p {
display: block !important; /* i added important while testing because of JS, you don't need to but if it doesn't work it is an option */
}

    input:not(:placeholder-shown):invalid ~ p {
    ...
}

    For this to work you need to move error message below to the input in HTML because one targets the adjacent sibling p, other is a general sibling of input. Also you need to remove error_message.style.display = "none"; from the JS because JS adds it as inline style and it has higher priority.

    Also interesting way of using that, i like to use frontend validation indicators as changing border colors but never tought of this.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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