Submitted over 2 years ago

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

Grog the Frog• 480

@GregLyons

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Pod request access landing page

HTML
CSS
JS

1newbie

View challenge

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

@brasspetals

Posted 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

Grog the Frog• 480

@GregLyons

Posted 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)

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