Delay page reload only in JS when form is validated

Question

Hope you're well ;)

My problem:

In a form, I would like, when it's validated, to apply a delay of 3 seconds to the click before sending and reloading the page in order to show a validation message. Here is the code:

//DOM elements
const firstName = document.getElementById("first");
const lastName = document.getElementById("last");
const validateForm = document.getElementById("validate");
const sendButtonValidation = document.getElementById("send_button");
const errorMessageFirstname = document.getElementById("error_message_firstname");
const errorMessageLastname = document.getElementById("error_message_lastname");
const confirmationMessage = document.getElementById("message_validation");

//validationName function
const validateFirstname = (firstName) => {
  return firstName.value.length >= 2;
}  
const validateLastname = (lastName) => {
  return lastName.value.length >= 2;
}

// tableau objets 
const array = [
  
  {key: firstName,
  fn:()=>validateFirstname(firstName),
  el: errorMessageFirstname,},
  
  {key: lastName,
  fn:()=>validateLastname(lastName),
  el: errorMessageLastname,},
  ];

 //general form submit submit function (event when submit)
 validateForm.addEventListener("submit", (e)=>{

   let isOk = true;
   
  
   // call array objects for function display error message
   array.forEach((item)=>{
     let validateInput = item.fn();
     
     // display ternary error messages
     item.el.style.display = validateInput ? "none" : "block";
     
// block sending form if error
     if (validateInput === false){
       isOk = false;
       e.preventDefault();
      } 
    
    })
    
    // modal display function for form confirmation with timeOut
    function confirmMessageForm () {
      confirmationMessage.style.display = "flex";
      setTimeout(() => {
        confirmationMessage.style.display = "none";
      }, 3000);
    }

    
    // appearance of confirmation window if form ok
    if (isOk){ 
      sendButtonValidation.onclick = () =>{
        setTimeout(validateForm, 3000);
      }
      confirmMessageForm();
      closeModal();
    }
 
}) 

.error_message{
  font-size: 0.7em;
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  line-height: 1;
  opacity: 1;
  transition: 0.3s;
  display: none;
}
.message-validation{
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 13%;
  top: 41%;
  overflow: auto;
  background-color: rgba(26, 39, 156, 0.9);
  color: white;
  padding: 5%;
  border-radius: 5px;
}

  <form   
              novalidate
              name="reserve"
              action="index.html"
              method="get"
              id="validate"
            >
              <div
                class="formData">
                <label for="first">Prénom</label><br>
                <input
                  class="text-control"
                  type="text"
                  id="first"
                  name="first"
                  required
                /><br> 
                <span class="error_message"
                      id="error_message_firstname">
                  Veuillez entrer deux caractères ou plus pour ce champ
                </span>
              </div>
              <div
                class="formData">
                <label for="last">Nom</label><br>
                <input
                  class="text-control"
                  type="text"
                  id="last"
                  name="last"
                  required
                /><br>
                <span class="error_message"
                  id="error_message_lastname">
                    Veuillez entrer deux caractères ou plus pour ce champ
                </span>
              </div>
   <input
                class="btn-submit"
                type="submit"
                class="button"
                id="send_button"
                method="get"
                value="C'est parti" 
              />
  
  
  
   <div id="message_validation" class="message-validation">
          Bravo! Votre réservation est prise en compte.
        </div>

The message is displayed but less than a second and then page reloads too quickly. I am trying to use a function to delay page reload for 3s but it doesn't work. I have to find a solution only in JS.

Thank you very much for your help !

Answer 1

It's because you're using <input type="submit">. Submit will reload the page based on your provided action url in the tag.

Simply switch your input type to button and handle the reload via your JS code!

Answer 2

Add e.preventDefault() in your funciton. validateForm.addEventListener("submit", (e)=>{ e.preventDefault() }) it will stop reloading when you submit the form.