獲取元素的ID

Question

我正在使用jquery驗證插件。並使用各種元素（例如，div，li等）設計網頁。 有選項卡（tab1，tab2，tab3等），通過內部鏈接，這些選項卡包含幾個字段（field1，field2，... filed n）。

其實我想標記標籤（例如，tab2）的bg顏色爲'紅色'，如果有任何'必填'字段錯過。 對於我曾嘗試下面的代碼...

if(!(jQuery('#admissionForm').valid())) { 
    var n = $("label.error").parents("div.tab-body").index(); 
    console.info(n); 
    var sel = "li.ui-state-default:nth-child(" + n + ")"; 
    console.info(sel); 
    jQuery('label.error').each(function(n) { 
     $("label.error").parents("div#form-wizard").children("ul.ui-tabs-nav").children(sel).children("a").css("background-color","red"); 
    }); 
} 

的問題是

1. 此代碼的工作只有一個標籤。
2. 的。每個（）函數的最高index.For例如，如果有在所有選項卡是錯誤，那麼它標誌着只有「TAB3」標籤不是所有的選項卡。

所以我想代碼可以標記標籤。因爲相應的錯誤也不會標記包含任何錯誤的選項卡。
Plz ..有人幫助我。 Thanx ..提前...

Answer 1

這可能有點棘手，以幫助你。我不確定你對validate插件的熟悉程度。

你不能按照你想要的方式真正做到這一點，因爲你需要檢查所有面板的輸入，看看它們是否有效。
來區分，而不使用內部驗證的唯一方法，就是使用label.error:visible和label.error:hidden，看看他們是否是有效還是無效。這是你的第一個問題所在。既然你有標籤，即使它們可能會出現錯誤，它們也是隱藏的。
這就是爲什麼你的例子只能標記一個標籤或所有標籤。

要解決這個問題，您需要替換當前的驗證處理程序和unhighlight，以便您可以自己做一些突出顯示和檢查。

我安排了this JSFiddle，你可以「擺弄」，希望評論足以幫助你。

的想法是，在驗證，檢查其輸入是無效的，那麼得到父面板，並添加一個錯誤類，以相應的選項卡。當用戶更正錯誤或沒有錯誤時，unhighlight將從選項卡中刪除錯誤類。

這裏的代碼。使用JQuery，JQuery UI和JQuery驗證插件。

的Javascript

$("#tabs").tabs(); 
$("#submitForm").button(); 
$("#validatetabs").validate({ 
    submitHandler: function(form) { 
    alert("Done!"); 
    }, 
    invalidHandler: function(form, validator) { 
    //Check if there are any invalid fields 
    var errors = validator.numberOfInvalids(); 
    if (errors) { 
     //Get all panels with errors 
     var errorpanels = $(validator.invalidElements()).closest(".ui-tabs-panel", form); 
     //Get ui tab sibling for every panel and add error 
     errorpanels.each(function(){ 
      $(this).siblings(".ui-tabs-nav").children("li").addClass("ui-state-error"); 
     }); 
    } 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
    $(element).removeClass(errorClass); 

    //Get panel 
    var panel = $(element).closest(".ui-tabs-panel", element.form); 
    if (panel.size() > 0) { 
     //Check to see if there are any more errors on this panel 
     if (panel.find("." + errorClass + ":visible").size() == 0) { 
      //Find matching tab for this elements panel id 
      panel.siblings(".ui-tabs-nav") 
       .find("a[href='#" + panel[0].id + "']") 
       .parent().removeClass("ui-state-error"); 
      } 
    } 
    } 
}); 

HTML

<form id="validatetabs" method="get" action=""> 
    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Tab1</a></li> 
     <li><a href="#tabs-2">Tab2</a></li> 
     <li><a href="#tabs-3">Tab3</a></li> 
    </ul> 
    <div id="tabs-1"> 
     A required field: <input id="inp1" name="inp1" class="required" type="text"/> 
    <br/> 
     Another required field: <input id="inp1a" name="inp1a" class="required" type="text"/> 
    </div> 
    <div id="tabs-2"> 
     A required field: <input id="inp2" name="inp2" class="required" type="text"/> 
    <br/> 
     Another required field: <input id="inp2a" name="inp2a" class="required" type="text"/> 
    </div> 
    <div id="tabs-3"> 
     A required field: <input id="inp3" name="inp3" class="required" type="text"/> 
    <br/> 
     Another required field: <input id="inp3a" name="inp3a" class="required" type="text"/> 
    </div> 
    </div> 
    <p> 
     <input id="submitForm" class="submit" type="submit" value="Submit"/> 
    </p> 
</form> 

CSS

label, input{ 
    display: block; 
    width: 100px; 
} 

label.error{ 
    position: absolute; 
    background: white; 
    width: auto; 
    margin-left: 125px; 
    margin-top: -26px; 
    padding: 2px; 
    color: red; 
    font-style: italic; 
}