Newsletter sign-up form with success message

Community feedback

• 

  Mohamed Ahmed Ibrahim•680

  @MohamedSharqawiPosted 8 days ago

  Hello there,

  Your design looks great! However, I have a few suggestions that could enhance your code:

  1️⃣ Improve HTML Semantics

  It would be more semantic to use a <ul> element for structuring consecutive or adjacent items. In the <div class="list"> element, you have already assigned the list class, so it would be better to wrap all these elements inside a <ul>. This approach will make your code clearer and more semantic.

  Additionally, if you want to simplify your HTML, you can remove the <img> element and replace it with the list-style-image: ; property or use the ::before pseudo-element to insert the image.

  2️⃣ Fix JavaScript Form Submission Issue

  Your JavaScript code is well-written, but I noticed a minor issue. When submitting the form, the <div class="success-page"> does not appear. This happens because the default form submission behavior is only prevented under two specific conditions:

  if (!email.value) {
    errorMsg.textContent = "Email is required.";
    event.preventDefault();
  } else if (!email.checkValidity()) {
    errorMsg.textContent = "Please enter a valid email address.";
    event.preventDefault();
  }
  

  To ensure the default action is always prevented, you should move event.preventDefault(); outside the conditional blocks. This way, the form submission behavior is consistently controlled, regardless of whether there is an error.

  Marked as helpful

  1
• 

  @valchiz•150

  @yemmightoPosted 6 days ago

  oh thanks for the suggestions, I was about to figure the html correction well enough but I don't seem to understand the javascript part, how will I take the event.preventDefault(); out of the conditions block, can you write a sample code of that part only as a comment,

  0