当我单击一个字段并传递另一个字段时,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!");
}
});
答案 0 :(得分:2)
因为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>
答案 1 :(得分:0)
您遇到的问题是,如果最后一个字段有效,则isValid标志将始终为true。解决此问题的一种方法是,一旦确定存在无效字段,就停止设置标志:
validObjects.forEach(function (element) {
if (isValid) {
isValid = element.value ? true : false;
}
});
答案 2 :(得分:0)