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

Question

我正在使用 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 选项卡，每次单击下一步按钮时，我都会增加一个变量以显示下一个选项卡而不重复代码块，最后检查:isValid只有在所有必填字段均有效后，才应变为 true，而不仅仅是最后一个字段。

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

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

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

非常感谢!

Answer 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')
    }
}