JQUERY用戶界面 - 基於驗證選擇選項卡

Question

我正在放置一個Jquery UI選項卡式表單，每個選項卡上的輸入都需要驗證。理想情況下，我想驗證當前可見的選項卡，然後選擇未驗證的下一個選項卡。

這樣做的最好方法是什麼？我的代碼如下...

<div id="tabs"> 
     <ul> 
      <li><a href="#tab1">One</a></li> 
      <li><a href="#tab2">Two</a></li>  
     </ul> 
     <div id="tab1" > 
      <div> 
       <ul> 
        <li> 
         <label class="uiLbl"> 
          Forename</label> 
         <asp:TextBox ID="txtMainCtcForename" runat="server" class="required"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
          Surname</label> 
         <asp:TextBox ID="txtMainCtcSurname" runat="server" class="required"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
          Email</label> 
         <asp:TextBox ID="txtMainCtcEmail" runat="server"></asp:TextBox> 
        </li>  
       </ul> 
      </div> 
     </div> 
     <div id="tab2" class="ui-tabs-hide"> 
      <div> 
       <ul> 
        <li> 
         <label class="uiLbl"> 
          Company Name</label> 
         <asp:TextBox ID="txtComName" runat="server" class="required"></asp:TextBox></li> 
        <li class="blankRow">&nbsp;</li> 
        <li> 
         <label class="uiLbl"> 
          Address</label> 
         <asp:TextBox ID="txtAdd1" runat="server"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
         </label> 
         <asp:TextBox ID="txtAdd2" runat="server"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
         </label> 
         <asp:TextBox ID="txtAdd3" runat="server"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
         </label> 
         <asp:TextBox ID="txtAdd4" runat="server"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
          Town</label> 
         <asp:TextBox ID="txtTwn" runat="server"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
          County</label> 
         <asp:TextBox ID="txtCty" runat="server"></asp:TextBox> 
        </li> 
        <li> 
         <label class="uiLbl"> 
          Postcode</label> 
         <asp:TextBox ID="txtPostcode" runat="server"></asp:TextBox> 
        </li> 
       </ul> 
      </div> 
     </div> 

編輯：沒有任何人有什麼想法？我看到它的方式，我需要......

如果當前選項卡通過驗證...

1. 獲取其驗證失敗
2. 確定父標籤控制。
3. 切換到選項卡。

Answer 1

我的解決辦法是使用我發現here其中重點介紹了驗證錯誤標籤的例子。

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

Answer 2

試試這個http://www.position-relative.net/creation/formValidator/demos/demoMultipleForms.html，並通過這種方式$("#tabs").tabs({ selected: 1 });對其進行驗證和顯示選項卡2也可以通過這種方式$('#tabs').tabs('disable', 1);

Answer 3

這取決於你正在實施的jQuery驗證插件禁用選項卡。 顯然，你也應該在服務器上進行驗證。

我建議你實現best jquery validation plugin（由jQuery開發團隊中的一員書面）中的一個：

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

你可以看到它是如何在這裏多步工作的例子。在代碼中，你可以找到解決辦法：

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

他們使用「自定義方法來檢查是否驗證當一個元素是在當前頁面」：

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) 

中的單擊事件按鈕「下一步」（在你的情況下，我想標籤）他們跟蹤當前頁面，變量「當前」。您應該更改「#tab」的「#sf」部分以及格式「cmaForm」的名稱。 你應該點擊事件添加到標籤或按鈕，通過從一個標籤到另一個：

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