那些遇到过的问题

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

Fre*_*ddy 6 javascript jquery jquery-validate

我有一个多形式，分为三个fieldsets。我试图实现的工作流程是：

  • 向用户呈现表单，其中包含第一个fieldset.
  • 用户完成他们能做的并点击.next按钮。
  • validate().next单击按钮时发生，如果无效（即未填写必填字段），我想向这些inputs添加一个错误类，以便我可以设置它们的样式（添加红色边框）。
  • 如果它们是正确的（所有字段都填写了必填项），然后继续在下一个fieldset.

目前我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");
    });

  });



});
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Mr *_*han 0

为此，您必须创建 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>
Run Code Online (Sandbox Code Playgroud)

其次，删除输入类型按钮并放置一个按钮。最后，将 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'
      });
  }

});
Run Code Online (Sandbox Code Playgroud)

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

归档时间：

查看次数：

402 次

最近记录：

6 年 前
使用多部分表单进行内联验证 0
更多相关链接
相关归档
使用Moment.js格式化日期和减去天数 96
JS:检查日期是否少于1小时？ 82
在正则表达式javascript中转义问号 77
谷歌地图v3:执行分钟.使用fitBounds时缩放级别 72
如何使用默认值从Object获取值 57
在单页网站中使用jquery ajax加载页面时显示进度条 33
jquery - 选择某个元素后面的所有元素 25
IntelliJ社区版:Javascript语法高亮 18
iScroll不会让项目被点击 17
简单的jquery验证 - 自定义位置错误消息放置 4
难疑归档
Docker与虚拟机有何不同？ 3523
如何检测元素外部的单击？ 2367
如何从Bash脚本检查程序是否存在？ 2032
为什么在C++中读取stdin的行比Python要慢得多？ 1738
在PostgreSQL中显示表格 1703
在上传图像之前预览图像 1476
为什么在允许某些Unicode字符的注释中执行Java代码？ 1326
显示屏上的转换:属性 1322
在JavaScript中删除数组元素 - 删除vs splice 1304
如何进行HTTP POST Web请求 1033