时间戳

首页 > 解决方案 > 为什么当我填写最后一个输入时我的表单会验证，即使所有其他输入都是空的？

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

问题描述

我有一个我正在尝试验证的联系表。我知道您可以只使用默认的“必需”属性，但是，我需要自定义验证错误消息。所以，我创建了这个 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”事件上调用该函数

标签： javascriptformsclassvalidationoop

解决方案

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

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

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
        });
    }
}

推荐阅读