Base apparel

Community feedback

• 

  Tanner Kopel•320

  @tankop1Posted about 3 years ago

  A couple tips:

  1. Your event listener may not be working for a couple reasons. First of all, you should either use the onclick attribute in your HTML, OR the .addEventListener('click', eventHandlerFunction);, not both. Also, make sure to attach the event listener to the button itself, not the image inside of the button. Lastly, because the button is inside the form element, the browser automatically reloads the page every time the button is clicked, which will remove your error message. To stop this from happening, you can use e.preventDefault(); at the top of your "validateEmail" function to avoid the browser's default behaviors (e.g. reloading the page) when a form button is clicked.

  2. Instead of using type="text" in for your inputs, it would make much more sense to use type="email". This code is more semantic, and also lets you use tools such as the :valid pseudo-class to change the styling of the input based on if the email is valid.

  Marked as helpful

  0

  ---

  

  Jordan•60

  @jordy-whitePosted about 3 years ago

  @tankop1 Thanks so much for the great feedback! I made a few changes based on it. I still have a problem getting the error logo to show when the email is invalid.

  if (input.value.match(emailRegex)) {
      errorLogo.style.display = "none";
    } else {
      errorLogo.style.display = "block";
    }
  };
  

  I can't work out why this isn't working. Any ideas?

  0

  

  Tanner Kopel•320

  @tankop1Posted about 3 years ago

  @meatpies I think the problem here is actually in your HTML: When giving an element more than one class, make sure to put all the classes in the same class attribute (e.g. class="form-button submit" instead of class="form-button" class="submit").

  Hopefully this should work (:

  0