为什么我的表单在我填写最后一个输入时会验证，即使其他所有输入都是空的？答案

【问题标题】：Why does my form validate when I fill in the very last input, even if all the others are empty?为什么我的表单在我填写最后一个输入时会验证，即使其他所有输入都是空的？
【发布时间】：2019-07-26 10:46:29
【问题描述】：

我有一个正在尝试验证的联系表单。我知道您可以只使用默认的“必需”属性，但是，我需要自定义验证错误消息。所以，我创建了这个 JS 类 - 当你初始化类时，你传入参数，例如您要定位的表单、表单中的输入以及提交按钮。

这是我的 codepen 的链接：https://codepen.io/Woodenchops/pen/oKxRGq?editors=1010

我尝试将 if 语句检查从“this”关键字更改为字段名称“.field.required” - 当我这样做时，第一个输入会响应按钮，即使所有其他输入都是空的

this._input = this._form.querySelectorAll(props.input);

this.checkFieldValue = function() {
     jQuery(this._input).each(function() {
       console.log(jQuery(this).val().length);
       if(jQuery(this).val().length <= 0) {
         $('.fake-click').show();
         var submitHeight = jQuery(submitButton).innerHeight();
         var submitWidth = jQuery(submitButton).innerWidth();
         var submitInputTop = jQuery(submitButton).position().top;
         var submitInputLeft = jQuery(submitButton).position().left;
         $('.fake-click').css({
           "background": "none",
           "width": submitWidth + 5,
           "height": submitHeight + 5,
           "position": "absolute",
           "top": submitInputTop,
           "left": submitInputLeft,
           "z-index": "1"
         });
         $(submitButton).css({
           "opacity": .5
         });
       } else {
         $('.fake-click').hide();
         $(submitButton).css({
           "opacity": 1
         });
       } 
     });
   }

这堂课有很多内容。但是，我正在尝试这样做，以便如果任何必填字段为空，则提交按钮将被禁用。我使用 jQuery each loop 循环遍历每个输入以检查值长度。它有点工作 - 您可以从第一个输入开始，输入一个值并一直到最后一个输入 - 提交按钮将保持禁用状态，直到您输入最后一个字段。但是，如果您只是转到最后一个输入并输入一个值，它会响应提交按钮 - 即使所有其他输入都是空的。

然后我在输入上的“keyup”事件上调用该函数

【问题讨论】：

标签： javascript forms class validation oop

【解决方案1】：

您循环遍历所有输入并在每次迭代后启用/禁用提交按钮。只有最后一次迭代（最后一次输入）会决定提交按钮的状态。

如果任何输入无效，您可以通过存储一个布尔值来解决此问题，并使用它来确定是否应启用提交按钮。像这样：

this.checkFieldValue = function () {
    let isValid = true;
    jQuery(this._input).each(function () {
        console.log(jQuery(this).val().length);
        if (jQuery(this).val().length <= 0) {
            isValid = false;
        }
    });
    if (isValid === false) {
        $('.fake-click').show();
        var submitHeight = jQuery(submitButton).innerHeight();
        var submitWidth = jQuery(submitButton).innerWidth();
        var submitInputTop = jQuery(submitButton).position().top;
        var submitInputLeft = jQuery(submitButton).position().left;
        $('.fake-click').css({
            "background": "none",
            "width": submitWidth + 5,
            "height": submitHeight + 5,
            "position": "absolute",
            "top": submitInputTop,
            "left": submitInputLeft,
            "z-index": "1"
        });
        $(submitButton).css({
            "opacity": .5
        });
    } else {
        $('.fake-click').hide();
        $(submitButton).css({
            "opacity": 1
        });
    }
}

【讨论】：