Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

📩 Newsletter Signup With Success State

Kendpr 290

@RealKendpr

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my function for validating the email, but I don't have error message for validating an empty input field.

Javascript

subForm.addEventListener("submit", (el) => {
  el.preventDefault();

  if (emailInput.value.match(emailFormat)) {
    defaultCard[0].classList.add("hidden");
    successCard[0].classList.add("visible");
  }
});

This is the html

    <div class="input-wrapper">
          <input
             type="email"
              name="email"
              id="email"
              placeholder="[email protected]"
          />
          <div class="input-error-message">Valid email required</div>
     </div>```

How did you implement an error message when a user tries to submit an empty input field?

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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