jquery - 验证表单的各个部分

Question

我已将表单分成多个 div，并使用“下一步”按钮来存储和隐藏这些部分。我还使用 jQuery 验证插件来为我完成所有验证。

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

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>

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它触发测试并返回一个 bool 值。

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

然后我使用.valid()在进入下一个部分之前测试该部分。 (不要忘记首先初始化插件；在 DOM 上的所有表单上调用 .validate() 。)

然后在最后一部分，我使用 .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