验证表单的各个部分

Question

我已经将我的表格分成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>

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验证插件编程测试表单,您使用的.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"按钮.这些是常规按钮,在标签之外form或type="button".

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

"概念证明"演示:http: //jsfiddle.net/N9UpD/

另外,请参阅:

/sf/answers/1258254301/

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