validation表单的各个部分

我已经将我的表格分成了div并使用Next按钮来购买和隐藏这些部分。 我也在使用jQuery Validation Plugin为我做所有的validation。

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

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

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

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

最后一个屏幕有提交表单按钮，然后通常会validation整个表单，但我需要在用户继续操作之前validation每个部分。

这是我认为应该起作用的：

CSS

.project-address {display:none;} 

HTML

  
 
 
Project details
 Project name:  
Next
 
 
 
Project address
 Project address: 
Next
 
  

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", } }); }); 

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

  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中validation表单元素，然后再继续进行。 即表单元素未经过validation..

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

Answer 1

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

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

当我创建多步骤表单时，我为每个部分使用一组唯一的

标记。

然后我使用.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回调函数。

“概念certificate”演示： http ： //jsfiddle.net/N9UpD/

另外，请参阅：

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

Answer 2

您可以对要validation的元素选择使用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; } 

   
 
 
Project details
 Project name:   
 Next 
 
 
Project address
 Project address: 
 Next 
  

Answer 3

它适用于表单标签

在html中设置如下结构

 
 
Project details
 Project name:  
Next
  

对于演示，请看这里