如何使用js验证表单并存储错误

Question

js验证标准w3sc

我修改它以将错误消息存储在div中，但在第一个错误之后它就无法工作了，因为它返回false。如何在div中使用内部html添加几个错误消息？类似于：

<div id"err">Name is empty,Price is empty,SKU is empty,</div>

这里的其他代码，显然如果我去掉return：false；然后输入将重新加载页面，这就是我想要避免的原因

function validateForm() {
if (document.forms["form)"]["sku"].value == "") {
document.getElementById("err").innerHTML += "SKU is empty,";
return false;
}
if (document.forms["form)"]["name"].value == "") {
document.getElementById("err").innerHTML += "Name is empty,";
return false;
}
if (document.forms["form)"]["price"].value == "") {
document.getElementById("err").innerHTML += "Price is empty,";
return false;
}
}

<form name="form)" action="" onsubmit="return validateForm()" method="post">
sku: <input type="text" name="sku">
Name: <input type="text" name="name">
price: <input type="text" name="price">
<input type="submit" value="Submit">
</form>
<div id="err"></div>

Answer 1

使用addEventListener和preventDefault 尝试这个版本

document.getElementById("myForm").addEventListener("submit", function(e) {
const errDiv = document.getElementById("err");
errDiv.innerHTML = ""
const err = []
if (this.name.value.trim() == "") err.push("Name is empty");
if (this.sku.value.trim() == "")  err.push("SKU is empty");
if (+this.price.value == 0)       err.push("Price is empty");
if (err.length) {
errDiv.innerHTML = err.join("<br/>");
e.preventDefault(); // stop submit
}
})

<form id="myForm" action="/action_page.php" method="post">
Name: <input type="text" name="name" /> 
SKU: <input type="text" name="sku"> Price: <input type="number" name="price">
<input type="submit" value="Submit">
</form>
<div id="err"></div>

Answer 2

您的validateForm函数应该如下所示：

function validateForm() {
let errorString = "";
let form = document.forms["form)"];
if (form["sku"] === "") 
errorString += "Sku is empty, ";
if (form["name"] === "")
errorString += "name is empty, ";
if (form["price"] === "")
errorString += "price is empty, ";
document.getElementById("err").innerHTML = errorString;
return errorString === "";
}