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 = "&emsp;* 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

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

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

Answer 3

尝试一下

JSFiddle

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

我在JS DOM中进行表单验证时遇到问题

3 个答案: