10

我已将表单分解为 div 并使用 Next 按钮来购物和隐藏这些部分。我也在使用 jQuery Validation Plugin 为我做所有的验证。

我需要知道的是如何逐节验证。所以这就是我所拥有的

  1. 个人信息
  2. 详细地址
  3. 项目信息
  4. 条款和条件

默认情况下隐藏 2,3 和 4 以使表单不那么令人生畏。

单击个人信息的下一步按钮将隐藏此 div 并显示地址详细信息等。

最后一个屏幕有提交表单按钮，然后它将正常验证整个表单，但我需要在用户继续之前验证每个部分。

这是我认为应该有效的：

CSS

   .project-address {display:none;}

HTML

   <form class="wpcf7">
      <div class="project-details">
        <h2>Project details</h2>
        <label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName">
      <div class="back-next"><span class="reg-next-button">Next</span></div>
      </div>
      <div class="project-address">
        <h2>Project address</h2>
        <label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress">
      <div class="back-next"><span class="reg-next-button">Next</span></div>
      </div>
    </form>

查询

    //clicking the next button hides this section and shows the next section
    jQuery('.project-details .reg-next-button').click(function() {

        // jQuery(".project-details").slideUp();
        // jQuery('.project-address').slideDown();          

        jQuery('.reg-project-name').validate({
            debug: true,
            rules: {
                projectName: "required"
            },
            messages: {
                projectName: "Please give your project a name",
            }
            });

             });

编辑：试图验证这样的一个元素。

       jQuery('.project-details .reg-next-button').click(function() {

        // jQuery(".project-details").slideUp();
        // jQuery('.project-funding').slideDown();          
        var validator = jQuery( ".wpcf7-form" ).validate();
        validator.element( ".reg-project-name" );

    });

编辑： 如果我单击“下一步”按钮，我需要在该 div 中验证表单元素，然后再继续，但不会发生。即表单元素没有被验证..

有什么想法吗？非常感谢。

4

3 回答 3

7

首先，忘记包装.validate()在任何点击处理程序中......它只是不能那样工作。一个问题是这.validate()不是一种“测试”表单有效性的方法。相反，.validate()只是在表单上初始化插件的方法。您将在页面加载时执行一次，因为任何后续调用都将.validate()被忽略。

要使用 jQuery Validate 插件以编程方式测试表单，请使用触发测试并返回布尔值的.valid()方法。

当我创建多步骤表单时，我<form>为每个部分使用一组唯一的标签。

然后我.valid()在移动到下一个之前测试该部分。 （不要忘记首先初始化插件；.validate()在 DOM 上的所有表单上调用 , 准备就绪。）

然后在最后一部分，我.serialize()在每个表单上使用并将它们连接成要提交的数据查询字符串。

像这样的东西...

$(document).ready(function() {

    $('#form1').validate({
        // rules
    });

    $('#form2').validate({
        // rules
    });

    $('#form3').validate({
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    $('#gotoStep2').on('click', function() {
        if ($('#form1').valid()) {
            // code to reveal step 2
        }
    });

    $('#gotoStep3').on('click', function() {
        if ($('#form2').valid()) {
            // code to reveal step 3
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});

重要的是要记住我click上面的处理程序没有使用type="submit"按钮。这些是常规按钮，位于标签之外或.formtype="button"

只有最后一个表单上的按钮是常规type="submit"按钮。那是因为我只在最后一个表单上利用了插件的内置submitHandler回调函数。

“概念证明”演示：http: //jsfiddle.net/N9UpD/

另外，请参阅以供参考：

https://stackoverflow.com/a/17975061/594235

于 2013-08-23T16:03:19.663 回答
5

您可以valid在选择要验证的元素上使用该方法。

工作示例：

// First, set up validator
$('#projectForm').validate({
  debug: true,
  rules: {
    projectName: "required"
  },
  messages: {
    projectName: "Please give your project a name",
  }
});

//clicking the next button hides the current section and shows the next section
$('.project-details .reg-next-button').click(function() {
    // Get the form that this button lives in
    var form = $(this).closest("form");
    // Get the validator object for the form
    var validator = form.data("validator");
    // Get the section that we're currently validating.  May need to modify this depending on the structure of your DOM
    var section = $(this).closest("div");
    // Get all controls (input, textarea, select, etc) in the section
    var fields = section.find(":input");
    if (fields.valid()){
      console.log("Valid!");
      // Hide this section...
      section.toggle();
      // And show the next section
      section.next().toggle();
    }
});
.project-address {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form id="projectForm">
  <div class="project-details">
    <h2>Project details</h2>
    <label>Project name: </label>
    <input type="text" class="reg-project-name" size="40" value="" name="projectName">
    <br>
    <button type="button" class="reg-next-button">Next</button>
  </div>
  <div class="project-address">
    <h2>Project address</h2>
    <label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress">
    <br>
    <button class="reg-next-button">Next</button>
  </div>
</form>

请参阅此 Codepen：http ://codepen.io/alexweissman/pen/Wragog

于 2016-02-07T02:39:43.103 回答
0

它在表单标签中工作

在html中设置如下结构

<form class="project-details">

   <h2>Project details</h2>

   <label>Project name: </label>
   <div class="back-next"><span class="reg-next-button">Next</span></div>


 </form>

演示见这里

于 2013-08-23T12:20:03.193 回答