我在 JS DOM 中的表单验证方面遇到问题

Question

当我单击一个字段并传递另一个字段时，span 标签呈红色。然后我按下提交按钮，它显示警报消息。但是当我转到红色跨度并填写字段并按提交按钮时，即使其他字段为空白，它也会显示成功。

const regForm = document.getElementById('regForm');
var validObjects = document.querySelectorAll('[customValidate]');
validObjects.forEach(function(element) {
element.addEventListener('blur', function() {
var emoji = element.previousElementSibling;
var label = emoji.previousElementSibling;
if (!element.value) {
emoji.className = "far fa-frown float-right  text-danger";
var span = document.createElement("span");
span.innerHTML = " * Required";
span.style.color = "red";
if (!label.getElementsByTagName("span")[0])
label.appendChild(span);
isValid = false;
} else {
emoji.className = "far fa-smile float-right  text-success";
var span = label.getElementsByTagName("span")[0];
if (span)
label.removeChild(span);
isValid = true;
}
});
});
regForm.addEventListener('submit', function(event) {
event.preventDefault();
var isValid = true;
validObjects.forEach(function(element) {
isValid = element.value ? true : false;
})
if (!isValid) {
alert("empty!");
} else {
alert("success!");
}
});

JSFiddle ：https://jsfiddle.net/roop06/cjmdabrf/

Answer 1

因为isValid只会等于forEach中的最后一项

validObjects.forEach(function(element) {
isValid = element.value ? true : false; // replaces false with true on last iteration
}) 

如果你想使用 forEach，你会想像这样编码它，这样它就不会覆盖isValid。它使用其以前的状态。

var isValid = true;
validObjects.forEach(function(element) {
isValid = element.value ? isValid : false;
}) 

但是，如果您在forEach循环中没有执行任何其他操作，则有更好的选择。该选项是使用每个将在它到达 false 时退出的。

var isValid = validObjects.every(function (element) {
return element.value.length
})

var form = document.querySelector('form');
var validObjects = Array.from(document.querySelectorAll('[customValidate]'));
form.addEventListener("submit", function (e) {
var isValid = validObjects.every(function (element) {
return element.value.length
})
return isValid
})

<form>
<input customValidate>
<input customValidate>
<input customValidate>
<button>submit</button>
</form>

或者，您可以使用required使用内置的HTML5验证，让浏览器为您完成。

<form>
<input customValidate required>
<input customValidate required>
<input customValidate required>
<button>submit</button>
</form>

Answer 2

试试这个

JSFiddle

validObjects.forEach(function(element) {
if(!(element.value)){
isValid = false;
}
})

Answer 3

您遇到的问题是，如果最后一个字段有效，则 isValid 标志将始终为真。解决此问题的一种方法是在确定存在无效字段后停止设置标志：

validObjects.forEach(function (element) {
if (isValid) {
isValid = element.value ? true : false;
}
});