Question

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

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

个人信息
地址详情
项目信息
条款和条件

单击“个人信息”的下一个按钮将隐藏此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来触发测试并返回布尔值。

当我创建多步骤表单时，我会为每个部分使用一组唯一的<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回调函数。

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

另外，请参阅参考：

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

Answer 2

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

工作示例：

＆＃13;

if( startZone == 1 && endZone == 1 ){ 
    totalTaxiFare = baseCharge;

    if( timeCovered > 0 && timeCovered <= 4 ){  
        baseCharge = 5.00;
        charge = (0.75/timeCovered)*timeCovered; 
        totalTaxiFare = baseCharge + charge; 
    }
}

if( startZone == 1 && endZone == 2 ){           
    totalTaxiFare = baseCharge;         
    if( timeCovered > 4 && timeCovered <= 10 ){
        baseCharge = 7.00;          
        charge =( 3.00 + (0.50 * ( timeCovered - 4 ) * ( 0.75 / timeCovered ) * timeCovered ) );
        totalTaxiFare = baseCharge + charge;        
    }
}

document.writeln("<p> The total taxi fare is $" + totalTaxiFare + "</p>");

＆＃13;

// 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();
    }
});

＆＃13;

.project-address {
  display:none;
}

＆＃13;

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

Answer 3

它适用于表单标记

在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

验证表单的各个部分

3 个答案:

工作示例：