验证表单时仅在 JS 中延迟页面重新加载

Question

希望你一切都好 ;)

我的问题：

在表单中，我希望在验证后在发送和重新加载页面之前对点击应用 3 秒的延迟，以便显示验证消息。这是代码：

//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>

消息显示但不到一秒，然后页面重新加载太快。我正在尝试使用一个函数将页面重新加载延迟 3 秒，但它不起作用。我只能在 JS 中找到解决方案。

非常感谢您的帮助！

Answer 1

这是因为您正在使用 <input type="submit">。提交将根据您在标记中提供的操作 url 重新加载页面。

只需将您的输入类型切换为 button 并通过您的 JS 代码处理重新加载！

Answer 2

在您的函数中添加 e.preventDefault()。 validateForm.addEventListener("提交", (e)=>{ e.preventDefault() }) 当您提交表单时它将停止重新加载。

验证表单时仅在 JS 中延迟页面重新加载

Delay page reload only in JS when form is validated

javascript

forms

delay