Skip to content
Submitted over 2 years ago

E-mail validation using HTML5 and :invalid pseudo-element

Grog the Frog•480
@GregLyons
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pod request access landing page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I tried to do this solely using HTML and CSS, but I found that I needed JavaScript because, even if I set 'minlength="1"' on the <input> element, it still accepts empty inputs as valid (even with 'type="email"'). Does anyone know how to make the min length work for length 0? I've gotten it working for, e.g. 'minlength="4"'...

Any other feedback is also welcome!

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    Hi, Grog! 🐸 Congrats on submitting another solution. 🎉 It looks great and responds nicely.

    As for your question, adding HTML attribute "required" to your email input should prevent empty submissions. 👍

    Marked as helpful
    1
    Grog the Frog•480
    @GregLyonsPosted over 2 years ago

    @brasspetals Ah, good point! I added that and greatly simplified the JavaScript, thanks! (still think I need to keep track of first attempt so error doesn't display in beginning, so unfortunately not pure HTML/CSS)

    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