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

时间:2019-12-16 14:34:01

标签: javascript html css

当我单击一个字段并传递另一个字段时,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/

3 个答案:

答案 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)

尝试一下

JSFiddle

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