如何仅使用JavaScript准确显示两个以上输入字段的表单验证错误消息

Question

我创建了一个JavaScript函数，该函数在提交输入时检查表单，如果没有输入，则显示错误消息。

当没有输入时，它可以完美地工作。它正确显示所有错误消息。

问题：但如果我只保留第一个字段为空，即fullname；if循环停止在那里并且不显示第二或第三错误消息即streetaddr&quantity。

注意：只有当streetaddr或quantity中的一个没有添加到第一个字段(即fullname(时，才会发生此错误

我应该怎么做才能正确显示错误消息。根据空白输入，不管输入字段是第一、第二还是第三。

此外，我更喜欢只使用Vanilla JavaScript，而不使用框架/库。我在努力学习

链接：这是来自Wikiversity 的挑战

/* Checking form function */
function checkForm(){
	window.alert("You clicked Submit!");
	var fullNameCheck = document.getElementById("fullname");
	var addressCheck = document.getElementById("streetaddr");
	var quantityCheck = document.getElementById("quantity");
	var is_valid = false;
	/* If statements to check if text box is empty */
	if (fullNameCheck.value=="" && addressCheck.value=="" && quantityCheck.value=="") {
		document.getElementById("nameerrormsg").style.display="inline";
		document.getElementById("addrerrormsg").style.display="inline";
		document.getElementById("qtyerrormsg").style.display="inline";
		is_valid = false;
	} else if(fullNameCheck.value==""){
		document.getElementById("nameerrormsg").style.display="inline";
		document.getElementById("addrerrormsg").style.display="none";
		document.getElementById("qtyerrormsg").style.display="none";
		is_valid = false;
	} else if (addressCheck.value==""){
		document.getElementById("addrerrormsg").style.display="inline";
		document.getElementById("nameerrormsg").style.display="none";
		document.getElementById("qtyerrormsg").style.display="none";
		is_valid = false;
	} else if (quantityCheck.value==""){
		document.getElementById("qtyerrormsg").style.display="inline";
		document.getElementById("nameerrormsg").style.display="none";
		document.getElementById("addrerrormsg").style.display="none";
		is_valid = false;
	} else {
		document.getElementById("nameerrormsg").style.display="none";
		document.getElementById("addrerrormsg").style.display="none";
		document.getElementById("qtyerrormsg").style.display="none";
		is_valid = true;
	} return is_valid;
}
	

.errormsg{
	color: red;
	background-color: yellow;
	display: none;
}

<form action="mailto:[e-mail]" onsubmit="return checkForm();">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity">
</label>
</p>
<p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>
</fieldset>
<input type="submit" value="Submit it!"> 
</form>

Answer 1

我更喜欢只将字段设为required，不需要Javascript：

<form action="mailto:[e-mail]" onsubmit="return checkForm();">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname" required>
</label>
</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr" required>
</label>
</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity" required>
</label>
</p>
</fieldset>
<input type="submit" value="Submit it!">
</form>

否则，您可以先隐藏所有错误消息。遍历表单中的所有输入，如果无效(丢失(，则导航到其祖先p，然后导航到相邻的.errormsg并设置其显示。

完全避免内联处理程序也是一个好主意，因为它们有太多问题，不值得使用。使用Javascript中的addEventListener正确连接侦听器。

document.querySelector('form').addEventListener('submit', () => {
for (const errormsg of document.querySelectorAll('.errormsg')) {
errormsg.style.display = 'none';
}
let valid = true;
for (const input of document.querySelectorAll('form input')) {
if (input.value) {
// valid
continue;
}
valid = false;
input.closest('p').nextElementSibling.style.display = 'inline';
}
return valid;
});

.errormsg{
	color: red;
	background-color: yellow;
	display: none;
}

<form action="mailto:[e-mail]">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity">
</label>
</p>
<p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>
</fieldset>
<input type="submit" value="Submit it!"> 
</form>

Answer 2

您可以像最初那样隐藏所有错误文本。然后显示基于相关输入故障的错误文本

/* Checking form function */
function checkForm() {
window.alert("You clicked Submit!");
var fullNameCheck = document.getElementById("fullname");
var addressCheck = document.getElementById("streetaddr");
var quantityCheck = document.getElementById("quantity");
var is_valid = false;
/* If statements to check if text box is empty */
document.getElementById("nameerrormsg").style.display = "none";
document.getElementById("addrerrormsg").style.display = "none";
document.getElementById("qtyerrormsg").style.display = "none";
is_valid = true;
if (fullNameCheck.value == "") {
document.getElementById("nameerrormsg").style.display = "inline";
is_valid = false;
}
if (addressCheck.value == "") {
document.getElementById("addrerrormsg").style.display = "inline";
is_valid = false;
}
if (quantityCheck.value == "") {
document.getElementById("qtyerrormsg").style.display = "inline";
is_valid = false;
}
return is_valid;
}

.errormsg {
color: red;
background-color: yellow;
display: none;
}

<form action="mailto:[e-mail]" onsubmit="return checkForm();">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
<!-- Quantity input -->
<p>
<label>
Quantity:
<input type="text" name="quantity" id="quantity">
</label>
</p>
<p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>
</fieldset>
<input type="submit" value="Submit it!">
</form>