希望你一切都好 ;）
我的問題：
在一個表單中，當它被驗證時，我希望在發送和重新加載頁面之前對點擊應用 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 中找到解決方案。
非常感謝您的幫助 ！
uj5u.com熱心網友回復：
這是因為你正在使用<input type="submit">. 提交將根據您在標簽中提供的操作 url 重新加載頁面。
只需將您的輸入型別切換為button并通過您的 JS 代碼處理重新加載！
uj5u.com熱心網友回復：
在您的功能中添加 e.preventDefault() 。validateForm.addEventListener("submit", (e)=>{ e.preventDefault() }) 當您提交表單時它將停止重新加載。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/472788.html
標籤：javascript 形式 延迟