Skip to content
Submitted about 3 years ago

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

P
Grog the Frog•480
@GregLyons
A solution to the Pod request access landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Anna Leigh•5,135
    @brasspetals

    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

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