Skip to content
Submitted over 5 years ago

Intro component using CSS grid, vanilla javascript, and Netlify forms

Hannah•655
@hannah-saurusrex
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Curious how to ensure all email addresses include "@blank." com, org etc.

Code

Please log in to post a comment

Log in

Community feedback

  • Tim Jenkins•145
    @tjenkins

    If you set type="email" for the email input element, the browser will check that the user entered a valid email address automatically. You can then use the :valid and :invalid CSS pseudo-classes to style the input accordingly.

    More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email.

    Hope that helps!

  • Matt Studdert•13,611
    @mattstuddert

    Great work, Hannah! To keep the custom validation styling you could use Regex in your JavaScript to check for a valid email format. Here are a few possible solutions on StackOverflow. I would recommend using type="email" on the email input though, to be sure the email-specific keyboard pops up for mobile users.

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