0

I have a simple email form and I want to show a snackbar notification if the email address is validated. However, it seems the .test() method is not allowing the snackbar to display.

When I run this, I see the "Showing snackbar" message in the console for a split second, but never the snackbar itself or the "Hiding snackbar" message. What do I need to do to allow the snackbar to display if the email address is validated?

function validateForm() {
  var x = document.forms["memberSearch"]["email"].value;
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(memberSearch.email.value)) {
    showSnackbar() 
    return (true);

  } else {
    alert("This doesn't look like an email address...");
    return (false);
  }
};

function showSnackbar() {
  console.log("Showing snackbar")
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); 
  console.log("Hiding snackbar")}, 3000);
}
adsigel
  • 111
  • 11

1 Answers1

0

Turns out this wasn't a Javascript issue at all. It was an issue with the HTML. The button was inside a <form> tag. Moving the button outside the form fixed it.

adsigel
  • 111
  • 11