Skip to content
Submitted almost 4 years ago

Base Apparel coming soon page with HTML, Sass, and JavaScript

Riyana Gueco•495
@rngueco
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey!

I wasn't too sure what to put in the JavaScript validation side of this project, but I removed the required attribute for the email input element to prevent the :invalid styles from firing right at the start and did that check on the JavaScript side instead.

Aside from that, a simple pattern matching using the regex seen from MDN's docs.

I consider myself a JavaScript newbie, so please advise or give feedback. 🙏

Thanks!

Update: I have updated my solution based on feedback. The email field is now required, but the error message will not fire unless the user has focused and then removed focus on the field. Additionally, validity is now being checked before form submission, returning the appropriate error message based on whether the email input is empty or invalid. In case of user bypassing the required field and submitting an empty input anyway, an extra validation step is still checked on form submit.

Code

Please log in to post a comment

Log in

Community feedback

  • Corvida Raven•680
    @SheGeeks

    Hi Riyana! Great work on this challenge.

    For empty :invalid inputs, you may want to look into combining :invalid with another psuedo-class. This article is a helpful reference for accomplishing this: https://www.stefanjudis.com/notes/target-non-empty-but-invalid-input-element-with-css/

    Also want to note that I don't see a mobile image when viewing your work from my phone. Shows on desktop just fine.

    Marked as helpful
  • Jimmy Sweeney•350
    @sweenejp

    Nice design! You really matched the solution well.

    I took a little different approach to the validation. I left on the required attribute because I think this keeps the error message from showing up until the user hits the submit button. Then I added an eventlistener with an event type of "invalid". Got help with this from this blog post here: https://daverupert.com/2017/11/happier-html5-forms/

    You can check out my solution here if you'd like: https://github.com/sweenejp/base-apparel-coming-soon-page

    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