Kevin Powell - Community•9mo ago

Stop form from sending when validation fails.

I have an internal validation for the input field on my form and I don't wanţthe form to submit when the user has an invalid email address based on my requirements. I have tried e.preventDefault() and return false; but it is still not working😭😭. I need help it is super urgent. This is what my input validation looks like

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 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();

this is what my submit to google sheet api looks like.

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);
    });
});

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);
    });
});

PLEASE what am i doing wrong?

2 Replies

13eck•9mo ago

You're not doing any validation before sending the fetch request. Your code doesn't check if the email is correct before sending the form. What you should be doing, right after e.prevenDefault() is checking the email validity. If not valid, do an early return:

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const email = form.getElementById("email");
  if (!emailValue.classList.contains("active") return;
  // do the rest here, as you've validated the email address
  // and it's good to go!
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const email = form.getElementById("email");
  if (!emailValue.classList.contains("active") return;
  // do the rest here, as you've validated the email address
  // and it's good to go!
}

This hooks into your valid() function that is adding/removing the active class from the email input element.

Judy•9mo ago

It worked Honestly, I didn't know what i was thinking😭😭 You are amazing.. Thank you so much It worked You are amazing

Gaming

Programming

Stop form from sending when validation fails.