JQUERY UI – 根据validation选择Tab

我正在整理一个Jquery UI选项卡表单，每个选项卡上的输入都需要validation。 理想情况下，我想validation当前可见的选项卡，然后选择下一个不validation的选项卡。

最好的方法是什么？ 我的代码如下……

 
 
One
 
Two
 
 
 
 
 
  Forename  
 
  Surname  
 
  Email  
 
 
 
 
 
 
 
  Company Name 
 
 
 
  Address  
 
    
 
    
 
    
 
  Town  
 
  County  
 
  Postcode  
 
 
  

编辑：有没有人有任何想法？ 我看待它的方式我需要……

如果当前选项卡通过validation…

1. 获得未通过validation的控件
2. 标识父选项卡。
3. 切换到选项卡。

Answer 1

试试这个http://www.position-relative.net/creation/formValidator/demos/demoMultipleForms.html并通过这种方式validation它们和show tab 2 $("#tabs").tabs({ selected: 1 }); 或者您可以通过这种方式禁用标签2 $('#tabs').tabs('disable', 1);

Answer 2

它取决于您正在实现的jqueryvalidation插件。 显然，您也应该在服务器中进行validation。

我建议你实现一个最好的jqueryvalidation插件 （由Jquery团队的成员编写）：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

您可以在此处查看有关如何使用多个步骤的示例。 在代码中，您可以找到解决方案：

http://jquery.bassistance.de/validate/demo/multipart/

他们使用“自定义方法来检查元素在validation时是否在当前页面上”：

  var v = $("#cmaForm").validate({ errorClass: "warning", onkeyup: false, onblur: false, submitHandler: function() { alert("Submitted, thanks!"); } }); $.validator.addMethod("pageRequired", function(value, element) { var $element = $(element) function match(index) { return current == index && $(element) .parents("#sf" + (index + 1)).length; } if (match(0) || match(1) || match(2)) { return !this.optional(element); } return "dependency-mismatch"; }, $.validator.messages.required) 

在按钮“next”（在您的情况下是我认为的选项卡）的点击事件中，他们使用变量“current”跟踪当前页面。 您应该更改“#tab”的“#sf”部分和“cmaForm”forms的名称。 您应该向选项卡或按钮添加单击事件以从一个选项卡传递到另一个选项卡：

 $("#tab1").click(function() { if (v.form()) { current = 0; } }); 

Answer 3

我的解决方案是使用我在此处找到的示例，其中突出显示具有validation错误的选项卡。

  $(function () { $("#tabs").tabs(); }); $(document).ready(function () { $("#tabs :input").attr("disabled", true); }); $("##ctl00_ContentPlaceHolder1_submitButton").button(); $(document).ready(function () { $("#updateLink").click(function () { if ($("#updateLink").text() == 'CLICK TO EDIT') { $("#updateLink").text("SAVE CHANGES") toEditMode(); } else { if ($("#aspnetForm").valid()) { $("#aspnetForm").submit(); $("#ctl00_ContentPlaceHolder1_submitButton").click(); $("#updateLink").text("CLICK TO EDIT") toDisplayMode(); } } }); }); function toEditMode() { $('#tabs :input').removeAttr('disabled'); } function toDisplayMode() { $("#tabs :input").attr("disabled", true); } $("#aspnetForm").validate({ submitHandler: function (form) { alert("submitted!"); }, invalidHandler: function (form, validator) { var errors = validator.numberOfInvalids(); if (errors) { var invalidPanels = $(validator.invalidElements()).closest(".ui-tabs-panel", form); if (invalidPanels.size() > 0) { $.each($.unique(invalidPanels.get()), function () { $(this).siblings(".ui-tabs-nav") .find("a[href='#" + this.id + "']").parent().not(".ui-tabs-selected") .addClass("ui-state-error") .show("pulsate", { times: 3 }); }); } } }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass(errorClass); $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); var $panel = $(element).closest(".ui-tabs-panel", element.form); if ($panel.size() > 0) { if ($panel.find("." + errorClass + ":visible").size() == 0) { $panel.siblings(".ui-tabs-nav").find("a[href='#" + $panel[0].id + "']") .parent().removeClass("ui-state-error"); } } } });