javascript - 单击“提交”按钮后无法让我的 HTML 表单不提交

Question

我有一个 HTML 表单。我被要求编写JS代码来验证表单中的数据并在同一页面上显示验证结果，而无需提交表单。我被告知让我的 JS 函数(单击“提交”时执行)返回 false，以便不提交表单。我这样做了，但当我运行页面时，表单验证的结果仍然在页面上闪烁半秒，并在提交表单时消失。我究竟做错了什么？这是我在 JS 中的内容:(第一个函数将事件监听器添加到表单的提交按钮)

function eventListener(){ 
var submitBtn = document.getElementById("sub");
submitBtn.addEventListener("click", validate, false);
}

function validate(){
    var input1 = document.getElementById("book_1").value;
    var input2 = document.getElementById("book_2").value;
    var input3 = document.getElementById("book_3").value;
    if(input1=="" || input2=="" || input3=="")
        window.alert("Error: Please fill in all input fields");
    else if(isNaN(input1) || isNaN(input2) || isNaN(input3))
        window.alert("Error: Please enter numbers in the input fields");
    else{
        var total1 = input1*19.99;
        var total2 = input2*86;
        var total3 = input3*55;
        var grandtotal = total1 + total2 + total3;
        var container = document.getElementById("container");
        var par = document.createElement("p");
        container.appendChild(par);
        par.innerHTML = "<h3>Basic XHTML (Quantity: " + input1 + "):</h3> $" + (total1)
                + "<br/> <h3>Intro to PHP (Quantity: " + input2 + "):</h3> $" + (total2)
                + "<br/> <h3>Advanced JQuery (Quantity: " + input3 + "):</h3> $" + (total3)
                + "<br/><br/> <h3>Final Total:</h3> $" + grandtotal;
    }
    return false;
}

window.onload = eventListener;

Answer 1

将事件传递给验证函数并设置preventDefault，如下所示:

function validate(event){
  event.preventDefault();
  // your code here
}

如果需要，使用 .submit() 验证后提交表单；