时间戳

首页 > 解决方案 > Foreach 验证基于 foreach 列表中的最后一个输入进行验证

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

问题描述

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

我有一个“下一步”按钮，一旦单击，它将查找 a 中的所有字段<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')在第一次检查中添加一个，我现在刚刚错过了这一点。

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

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

非常感谢！

标签： javascriptjqueryhtmlbootstrap-4

解决方案

在每次迭代中，您都在重新定义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')
    }
}

推荐阅读