获取元素的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; 
}