在移动到其他字段集之前验证按钮单击上的字段集

Question

我有一个包含三个fieldsets 的多步骤表单。

我有一个名为 next 的按钮，单击它会显示下一个 fieldset（它会在其中设置动画）。

在显示下一个fieldset 之前，在next 上单击我想运行检查以查看用户是否已完成当前fieldset 中的所有字段。基本上完成这个fieldset，然后再转到另一个。

我想要实现的伪是：

• 用户没有填写任何必填字段并单击next 按钮。
• 提醒用户此字段集中的所有字段均未填写。
• 在填写必填字段之前，不会显示下一个字段集。
• 用户现在填写了必填字段。
• 点击next，现在可以显示下一个fieldset。

我的尝试：

function checkInputs() {
  var isValid = true;
  $('fieldset').filter('[required]').each(function() {
    if ($(this).val() === '') {
      // $('#confirm').prop('disabled', true)
      isValid = false;
      return false;
    }
  });
  if(isValid) {$('#confirm').prop('disabled', false)}
  return isValid;
}

$('#confirm').click(function() {
  alert(checkInputs());
});

在下面的演示中，您会看到我在 .next 点击时运行此功能。在demo中，如果firstname和address字段留空（都是必填字段），点击next alerts true，不正确。

因此，它会加载到下一个字段集中。

完整演示：

jQuery(function($) {

  var current_fs, next_fs, previous_fs; //fieldsets
  var left, opacity, scale;
  var animating;

  /*************************************************/
  // CHECK IF FIELDS ARE FILLED IN BEFORE NEXT CLICK
  /**************************************************/

  function checkInputs() {
    var isValid = true;
    $('fieldset').filter('[required]').each(function() {
      if ($(this).val() === '') {
        // $('#confirm').prop('disabled', true)
        isValid = false;
        return false;
      }
    });
    if (isValid) {
      $('#confirm').prop('disabled', false)
    }
    return isValid;
  }

  $('#confirm').click(function() {
    alert(checkInputs());
  });


  /***********************************************/
  // ONCLICK NEXT BUTTON, ANIMATE IN NEXT FIELDSET
  /***********************************************/

  $(".next").click(function() {

    checkInputs();

    if (checkInputs() == false) {
      console.log("fill required");
    } else {
      if (animating) return false;
      animating = true;
      current_fs = $(this).parent();
      next_fs = $(this).parent().next();

      next_fs.show();
      current_fs.animate({
        opacity: 0
      }, {
        step: function(now, mx) {
          scale = 1 - (1 - now) * 0.2;
          left = (now * 50) + "%";
          opacity = 1 - now;
          current_fs.css({
            'transform': 'scale(' + scale + ')',
            'position': 'absolute'
          });
          next_fs.css({
            'left': left,
            'opacity': opacity
          });
        },
        duration: 800,
        complete: function() {
          current_fs.hide();
          animating = false;
        },
        easing: 'easeInOutBack'
      });
    } // else close
  });




  /*********************************/


});

.form {
  min-height: 800px;
  user-select: none;
  overflow: hidden;
}
.form form#rsvpForm {
  width: 600px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
.form form#rsvpForm fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 60px 50px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: block !important;
}
.form form#rsvpForm fieldset:not(:first-of-type) {
  opacity: 0;
}
.form form#rsvpForm input,
.form form#rsvpForm textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js?ver=5.3.2'></script>

<div class="form" id="rsvp-form">

  <form id="rsvpForm" action="" method="post">

    <!-- fieldset 1 -->
    <fieldset>
      <input type="text" name="fname" placeholder="First name*" required />
      <textarea name="address" placeholder="Address*" required></textarea>
      <input type="button" id="confirm" name="next" class="next" value="Next" />
    </fieldset>

    <!-- fieldset 2 -->
    <fieldset>
      <textarea name="other" placeholder="Enter your note here ..."></textarea>
      <input type="submit" name="submit" class="submit" value="Submit" />
    </fieldset>



  </form>

</div>

Answer 1

其实问题出在这行代码上：

$('fieldset').filter('[required]').each(function() {
  // your code here
})

因为filter 所做的是，它会根据您传递的选择器过滤所有fieldset。因此，它会查找所有具有属性required 的fieldsets，它们都没有。所以它不会进入循环。

你需要的是这个：

$('fieldset').find('[required]').each(function() {
  //your code here
})

find 使用您传递的选择器查找所有元素，在您的情况下是 required 和 each 然后将对其进行迭代。

更多关于find()和filter()的信息。

工作fiddle。