Foreach 验证基于 foreach 列表中的最后一个输入进行验证答案

【问题标题】：Foreach validation bases validation on last input in foreach listForeach 验证基于 foreach 列表中的最后一个输入进行验证
【发布时间】：2019-11-03 11:05:19
【问题描述】：

我正在用 jQuery 和 Laravel 构建一个多步骤表单。每个步骤包含几个输入字段和一个文本区域，在这种情况下，步骤 1 包含 3 个输入和 1 个文本区域，总共 4 个字段，其中 1 个是可选的，不需要进行步骤 2。

我有一个“下一步”按钮，单击该按钮后，将查找 <div> 中的所有字段并检查它们是否为空，如果所有必填字段都没有，它将仅继续下一步空。

但是，我的代码似乎只获得了最后一个 foreach 项目，无论它是否需要，我怀疑这是 Stack Overflow 上的一个常见问题，我对此相当陌生。

我的 JS 代码：

let currentStep = 1
    var isValid;
    function validateStep() {
      runValidation()
    }

    function goBackStep() {
      $('#pills-tab-' + currentStep).removeClass('active')
      $('#pills-' + currentStep).hide().removeClass('show')
      if (currentStep > 0) currentStep--
      $('#pills-' + currentStep).show().addClass('show')
      $('#pills-tab-' + currentStep).addClass('active')
    }

    function runValidation() {
      $('.js__step-' + currentStep).find('input, textarea, select').each(function() {
        var element = $(this)

        if (element.val() == "") {
          element.removeClass('is-valid').addClass('is-invalid')
          isValid = false;
        } else {
          element.removeClass('is-invalid').addClass('is-valid')
          isValid = true;
        }

      })
      if (isValid) {
        $('#pills-tab-' + currentStep).removeClass('active')
        $('#pills-' + currentStep).hide().removeClass('show')
        currentStep++
        $('#pills-' + currentStep).show().addClass('show')
        $('#pills-tab-' + currentStep).addClass('active')
      }
    }

从上面的代码中，我使用的是 Bootstrap 4 选项卡，每次单击下一步按钮时，我都会增加一个变量，以便在不重复代码块的情况下显示下一个选项卡，最后检查：@ 987654324@ 应该只在所有必填字段都有效时才变为 true，而不仅仅是最后一个字段。

我可以在第一次检查中添加&& element.prop('required')，我现在只是错过了这一点。

它还应该在返回某个步骤时重置验证，以防万一它认为它是有效的。

我缺少什么来检查所有必填字段的验证，而不仅仅是最后一个？

非常感谢！

【问题讨论】：

标签： javascript jquery html bootstrap-4

【解决方案1】：

在每次迭代中，您都在重新定义 isValid。这意味着它只检查最后一个值。要解决此问题，您可以在开头将isValid 设置为true，并且仅在输入字段为空时才更新它。这意味着如果任何字段为空，它将失败。即使在完成字段之前对其进行检查。

function runValidation() {
    isValid = true;
    $('.js__step-' + currentStep).find('input, textarea, select').each(function () {
        var element = $(this)

        if (element.val() == "") {
            element.removeClass('is-valid').addClass('is-invalid')
            isValid = false;
        } else {
            element.removeClass('is-invalid').addClass('is-valid')
        }
    });

    if (isValid) {
        $('#pills-tab-' + currentStep).removeClass('active')
        $('#pills-' + currentStep).hide().removeClass('show')
        currentStep++
        $('#pills-' + currentStep).show().addClass('show')
        $('#pills-tab-' + currentStep).addClass('active')
    }
}

【讨论】：