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
                >
                <label for="first">Prénom</label><br>
                <input
                  
                  type="text"
                  id="first"
                  name="first"
                  required
                /><br> 
                <span 
                      id="error_message_firstname">
                  Veuillez entrer deux caractères ou plus pour ce champ
                </span>
              </div>
              <div
                >
                <label for="last">Nom</label><br>
                <input
                  
                  type="text"
                  id="last"
                  name="last"
                  required
                /><br>
                <span 
                  id="error_message_lastname">
                    Veuillez entrer deux caractères ou plus pour ce champ
                </span>
              </div>
   <input
                
                type="submit"
                
                id="send_button"
                method="get"
                value="C'est parti" 
              />
  
  
  
   <div id="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 !

CodePudding user response：

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 submit and handle the reload via your JS code!

CodePudding user response：

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