Question

我想将jQuery Validation Plugin与jQuery UI Tabs一起使用。如何在下一个按钮触发的每个步骤上使用jQuery Validation Plugin进行验证。我看到jQuery Validation Plugin的示例，主要用于同时验证整个表单。我需要一步一步。

我不是专业人士所以请告诉我一些简单的解决方案，而不是建议我其他插件。我的代码如下：

$("#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;
   });
}

提前致谢。

Answer 1

我意识到你不想要其他插件的建议。但我认为这对你特别有用：

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

与jquery验证插件很好地集成。并且还可以使用jQuery-UI主题（如果您已经在您的网站上使用它们）。

Answer 2

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

例如： - 如果我在第2步。那么这个div“fragment-2”将不会有css类“ui-tabs-hide”。您可以看到该课程适用于其他潜水。

因此，尝试获取当前活动的div ID（此处为“ fragment-2 ”）。然后这样做

http://docs.jquery.com/Plugins/Validation/Validator/element#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类。但是尝试使用其他循环并处理false元素和return false而不执行任何步骤。因此，在设置值之前，用户不会移动到下一个片段。

我不确定这是最好的主意。我对该验证插件知之甚少。

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

2 个答案: