点击按钮后显示错误Javascript

Question

点击我的按钮后，我会检查我的文本字段是否为空。我的支票工作，但如果我显示我的消息它显示几秒钟。可能是我点击按钮的时间。这是我尝试过的一些代码。

<form> 
    <div id="errorblock"> 
     <p id="errortext">Error.</p> 
    </div> 
    <!-- here are my input fields--> 

    <button>Send</button> 
</form> 

这是我加入我的事件侦听器的页面初始化后：

document.getElementsByTagName("button")[0].addEventListener("click", function(){ 
    sendEmail(); 
}); 

function sendEmail() { 

    //check if all fields are fill in. If not do this code; 
    document.getElementById("errortext").innerHTML = "Fill in all the fields please."; 

    var errorblock = document.getElementById("errorblock");  
    errorblock.style.visibility = "visible"; 
    errorblock.style.height = "46px"; 
} 

谁能帮助我？ 谢谢

Answer 1

默认HTMLButtonElement有type="submit"。这意味着在按钮上点击表格就会被提交。您需要确保您在表单中出现错误的情况下阻止提交。例如通过调用事件对象的preventDefault方法：

document.getElementsByTagName("button")[0].addEventListener("click", function (e) { 
    if (!sendEmail()) { 
     e.preventDefault(); 
    } 
}); 

function sendEmail() { 

    //check if all fields are fill in. If not do this code; 
    document.getElementById("errortext").innerHTML = "Fill in all the fields please."; 

    var errorblock = document.getElementById("errorblock"); 
    errorblock.style.visibility = "visible"; 
    errorblock.style.height = "46px"; 

    // if there are errors return false 
    // return true if input is correct 
    return false; 
} 

此外，我建议听的形式，而不是按钮单击事件上onsubmit事件：

document.querySelector("form").addEventListener("submit", function (e) { 
    if (!sendEmail()) { 
     e.preventDefault(); 
    } 
});