Stop form submission when the required fields have not been filled out

Question

I have the following function with the problem that, when submitting the form, the redirection works even though the user has not filled in the required fields, do you know how to solve it?

var submitButton = document.getElementById("form-submit");
var submitEvent = function (event) {

  var SiteTestRedirect = document.getElementById("SiteTestfs").value;
  var SiteTestRedirectPopup = document.getElementById("SiteTestfspop").value;

  if (SiteTestRedirect === "I Wanna Work" || SiteTestRedirectPopup === "I Wanna Work As --") {
    event.preventDefault();
    location = "https://SiteTest.es/thank-you-start-with-us/";
  } else if (SiteTestRedirect === "Work" || SiteTestRedirectPopup === "Work") {
    event.preventDefault();
    location = "http://SiteTest.es/thank-you-start-with-us/";
  } else {
    setTimeout(function(){
      location = "https://SiteTest.es/thank-you/";
    }, 3500);
  }


};

submitButton.addEventListener("click", submitEvent, false);

this is what i tried but still the form is sent with the required fields unfilled:

function manualValidate(ev) {
  ev.target.checkValidity();
  return false;
}
$(".wpcf7-form").bind("submit", manualValidate);

Answer 1

It does not work because you change the location of the page on click. It has no relationship to the form submission. The click action completes.

So either call checkValidity inside your function that you call on click or move the code into the function you call on submit.