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

Community feedback

• 

  Tim Jenkins•145

  @tjenkinsPosted almost 5 years ago

  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!

  1

  ---

  

  Hannah•655

  @hannah-saurusrexPosted almost 5 years ago

  Awesome, thanks for the tip. that did the trick!

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  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.

  0

  ---

  

  Hannah•655

  @hannah-saurusrexPosted almost 5 years ago

  Awesome, thank you. Looks like type="email" did the trick! :)

  0