How to stop 'submit' form when it is not valid and display error message?

Question

when I put invalid id and password, the page just display the error message and refresh the page. Since I don't want the page to get refresh, how to stop the 'submit'.

const accounts = [
  ["myaccount", "mypassword1"],
  ["myaccount2", "mypassword2"],
];
  const event = document.getElementById("info");
  event.addEventListener("submit", (e) => {
    accounts.forEach((element) => {
      if (element[0] === id && element[1] === password) {
        pass = true;
      }
    });
    if (pass) {
      signInForm.action = "builder.html";
    } else {
      e.stopPropagation();
      document.getElementById("error").innerText = "error";
    }
  });

Answer 1

Try using event.preventDefault() method.

https://www.w3schools.com/jsref/event_preventdefault.asp

else {
      e.preventDefault();
      e.stopPropagation();
      document.getElementById("error").innerText = "error";
    }

This might help too - https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation