Stop form from sending when validation fails.

const valid = () => {
  const email = document.getElementById("email");
  const err = document.getElementById("err");

  email.addEventListener("input", (e) => {
    const validEmail = e.target.value;
    const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    const approved = validEmail.match(pattern);

    if (approved) {
      err.classList.remove("active");
    } else {
      err.classList.add("active");
    }

    if (email.value === "") {
      err.classList.remove("active");
    }
  });
};
valid();

const scriptURL =
  "https://script.google.com/macros/s/AKfycbx3oxaIEyUfmz9W5fyEdZifo_jyfYLKVclnRVx1rys1md3bJPi5_IQpOrlsLppDzKhA/exec";
const form = document.forms["submit-to-google-sheet"];
const msgSent = document.getElementById("msg-sent");
const msgErr = document.getElementById("msg-err");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  fetch(scriptURL, { method: "POST", body: new FormData(form) })
    .then((response) => {
      msgSent.innerHTML = "Message Sent Successfully.✅";

      setTimeout(function () {
        msgSent.innerHTML = "";
      }, 3000);
      form.reset();
    })
    .catch((error) => {
      msgErr.innerHTML = "Oops! Something Went Wrong.❌";

      setTimeout(function () {
        msgErr.innerHTML = "";
      }, 3000);
    });
});