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选项卡，每次单击下一步按钮时，我都会递增一个变量，以显示下一个选项卡，而无需重复代码段，最后进行检查：只有所有必填字段均有效后，{1}}才应成为isValid，而不仅仅是最后一个字段。

我可以在最初的检查中添加一个true，我现在暂时错过了这一点。

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

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

非常感谢！

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

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

1 个答案: