jQuery验证-如何在类似向导的表单中使用步骤

jQuery Validation - How to use for steps in a wizard like form?

本文关键字：表单 向导 验证 jQuery      更新时间：2023-09-26

我想使用jQuery验证插件与jQuery UI选项卡。我如何使用jQuery验证插件验证下一个按钮触发的每个步骤。我看到了jQuery验证插件的例子，大多数都是一次验证整个表单。我需要一步一步来。

我不是专业的，所以请告诉我一些简单的解决方案，而不是建议我其他插件。我的代码看起来像:

$("#frag1").click(function(){
     //I need jQuery Validation code here for a single step
     event.preventDefault();
}else {
$('.next-tab, .prev-tab').click(function() { 
         $tabs.tabs('select', $(this).attr("rel"));
         return false;
   });
}

提前感谢。

我知道你不想要其他插件的建议。但我认为这对你可能特别有用:

有jQuery的formwizard插件，http://thecodemine.org/

与jquery验证插件集成得很好。也可以使用jQuery-UI主题(如果你已经在你的网站上使用它们)。

在下一步按钮上单击检查哪个片段div没有"ui-tabs-hide"这个css类。然后尝试为所有输入和复选框应用相同的CSS类(例如:-"myinputs")。然后对当前的"fragment"div输入验证应用验证。

例如

: -如果我在步骤2。然后这个div "fragment-2"不会有css类"ui-tabs-hide"。您可以看到该类应用于其他潜水。

因此，尝试获得当前活动div ID(这里是"fragment-2")。然后像这样做

http://docs.jquery.com/Plugins/Validation/Validator/element元素
 $("#myform").validate().element( "#myselect" ); // here there are passing element ID
$("#myform").validate().element('#'+ CurrentFragment + '.myinputs'); //here we are passing current fragment css class inputs.

我不确定它会接受css类。但是尝试一次else循环并处理false元素和return false，而不需要任何步骤。因此，用户将不会移动到下一个片段，直到他设置值。

我不确定这是不是最好的主意。我不太了解这个验证插件
相关文章：