javascript - 利用 JQuery Validate 库(单击按钮时)检查字段集中的输入是否有效，然后在下一个字段集中设置动画

Question

我有一个多表单，它分为三个字段集。我想要实现的工作流程是:

• 向用户提供表单，其中包含第一个字段集中的字段。
• 用户完成他们能做的事情并点击.next按钮。
• validate() 发生在 .next 按钮单击时，如果无效(即未填写必填字段)，我想向这些 添加一个错误类>输入，以便我可以设置它们的样式(添加红色边框)。
• 如果它们正确(所有必填字段均已填写)，则继续在下一个字段集中中进行动画处理。

目前我的 validate() 显示有点故障。例如，在下面的演示中，执行以下步骤:

• 单击“下一步”按钮(检查控制台以查看确认已单击该按钮的消息)。
• 注意到没有出现错误消息吗？
• 现在单击名字字段。注意到错误消息现在是如何显示的吗？
• 这也很奇怪，因为 address 也是必填字段(如 JS 中定义)，但没有显示错误？

单击按钮时，我希望显示错误。

现在，假设在下次单击时填写了名字和地址(该字段集中的两个必填字段)，因为这些字段有效，所以我想在下一个字段集中设置动画，但是 submitHandler 不起作用？不确定为什么？

演示:

jQuery(function($) {

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

  $(".next").click(function() {
  
  console.log('next is clicked');


    $("form").validate({
      rules: {
        // name : param
        fname: "required",
        address: "required",
        phone: {
          required: true,
          matches: "^(\\d|\\s)+$",
          minlength: 11,
          maxlength: 11
        }
      },
      messages: {
        fname: "Please enter your firstname",
        address: "Please enter your address",
        phone: "Please enter a valid phone number"
      },

      // if validation is correct, animate in next fieldset
      submitHandler: function(form) {
        if (animating) return false;
        animating = true;
        current_fs = $(this).parent();
        next_fs = $(this).parent().next();
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
        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,
              'height': 'auto',
              'padding': '60px 50px'
            });
          },
          duration: 800,
          complete: function() {
            current_fs.hide();
            animating = false;
          },
          easing: 'easeInOutBack'
        });
      }
    });

    $('input').blur(function() {
      $("form").validate().element("input");
    });

  });



});

.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;
}
.form form#rsvpForm input.error,
.form form#rsvpForm textarea.error {
  border: 1px solid red;
}

.form form fieldset .error__message{
  display: none;
}

.form form fieldset.has-error .error__message{
  display: block;
}

<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>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js'></script>

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

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

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

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



  </form>

</div>

Answer 1

为此，您必须创建 3 个单独的表单。每个表单都有自己的验证。在一张表单上设置所有 3 个验证将始终导致无效，因为验证处于事件状态并且所需字段未填​​写。

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

  <form id="rsvpForm1" action="" method="post">
    <!-- fieldset 1 -->
    <fieldset id="field1">
      <input type="text" name="fname" placeholder="First name*" />
      <textarea name="address" placeholder="Address*"></textarea>
      <button>Next</button>
    </fieldset>
    <!--/ fieldset 1 -->
  </form>

 <form id="rsvpForm2" action="" method="post">
    fieldset 2
    <!-- fieldset 2 -->
    <fieldset id="fieldset2">
      <input type="tel" name="phone" placeholder="Phone*" required />
      <button>Next</button>
    </fieldset>
  </form>
  <!--/ fieldset 2 -->

 <form id="rsvpForm3" action="" method="post">
    fieldset 3
    <!-- fieldset 3 -->
    <fieldset id="fieldset3">
      <textarea name="other" placeholder="Enter your note here ..." required></textarea>
      <button>Next</button>
    </fieldset>
    <!--/ fieldset 3 -->
 </form>

</div>

其次，删除输入类型按钮并放置一个按钮。最后，将 id 添加到所有 3 个表单中，并使用它来验证提交时的表单。另外，我以对象的形式添加了验证和消息，因为这样更具可读性。

jQuery(function($) {

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

  /*First Form*/
  $("#rsvpForm1").validate({
    rules: {
      fname: {
        required: true,
      },
      address: {
        required: true,
        // minlength: 5
      }
    },
    messages: {
      fname: {
        required: "Please enter your firstname",
      },
      address:{
        required: "Please enter your address",
      }
    },

    // if validation is correct, animate in next fieldset
    submitHandler: function(form) {
      formSubmit(form,'#fieldset1','#fieldset2');
    }
  });
  /*----------*/

  /*Second Form*/
  $("#rsvpForm2").validate({
    rules: {
      phone: {
        required: true,
        minlength: 5,
        maxlength: 11  
      }
    },
    messages: {
      phone:{
        required: "Please enter a valid phone number",
        matches: "Invalid value",
        minlength: "Min length is exceeded",
        maxlength: "Max length is exceeded",
      } 
    },

    // if validation is correct, animate in next fieldset
    submitHandler: function(form) {
      formSubmit(form,'#fieldset2','#fieldset3');
    }
  });
  /*-----------*/

  /*Third Form*/
  $("#rsvpForm3").validate({
    rules: {
      phone: {
        required: true,
        matches: "^(\\d|\\s)+$",
        minlength: 11,
        maxlength: 11 
      }
    },
    messages: {
      other:{
        required: "Please enter a message"
      }, 
    },

    // if validation is correct, animate in next fieldset
    submitHandler: function(form) {
      formSubmit(form);
    }
  });
  /*----------*/


  function formSubmit(form, current, next){
    if (animating) return false;
    animating = true;
    current_fs = $(current);
    next_fs = $(next);
    next_fs.addClass("active");

    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,
            'height': 'auto',
            'padding': '60px 50px'
          });
        },
        duration: 800,
        complete: function() {
          current_fs.hide();
          animating = false;
        },
        easing: 'easeInOutBack'
      });
  }

});

工作示例: https://jsfiddle.net/mrAhmedkhan/pjgz7cwq/