验证表单的各个部分

Question

我已将表单分解为多个 div，并使用“下一步”按钮来购物和隐藏这些部分。 我也在使用 jQuery Validation Plugin 为我做所有的验证。

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

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

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

点击Personal Information的next按钮会隐藏这个div并显示Address Details等。

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

这是我认为应该有效的方法：

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>

JQUERY

    //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 中验证表单元素，然后再继续，但不会发生。即表单元素没有被验证..

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

Answer 1

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

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

当我创建多步骤表单时，我为每个部分使用一组独特的 <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" 按钮。这些是常规按钮，位于form 标记或type="button" 的外部。

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

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

另外，请参阅：

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

Answer 2

您可以对要验证的选定元素使用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

Answer 3

它在form标签中工作

在 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>

有关演示，请参阅 here