javascript - 获取元素的 Id

Question

我正在使用 jquery 验证插件。并使用各种元素(例如，div、li 等)设计网页。有选项卡(tab1、tab2、tab3 等)，通过内部链接，这些选项卡包含多个字段(field1、、field2、....filed n)。

实际上，如果缺少任何“必填”字段，我想将选项卡(例如，tab2)的背景颜色标记为“红色”。为此，我尝试了以下代码...

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. .each() 函数采用最高索引。例如，如果所有选项卡中都有错误，则它仅标记“tab3”选项卡，而不标记所有选项卡。

所以我想要可以标记选项卡的代码。因为相应的错误也不会标记包含任何错误的选项卡。
Plz ..有人帮帮我。谢谢..提前...

Answer 1

要帮助您，这可能有点棘手。我不确定您对验证插件有多熟悉。

你不能真的按照你想要的方式去做，因为你需要检查所有面板的输入，看看它们是否有效。
在不使用内部验证的情况下区分它的唯一方法是使用 label.error:visible 和 label.error:hidden 来查看它们是否有效。这就是你的第一个问题所在。由于您有标签，因此即使它们可能有误，它们也会被隐藏。
这就是为什么您的示例只能标记一个选项卡或所有选项卡。

为了解决这个问题，你需要替换当前的验证处理程序并取消突出显示，这样你就可以自己做一些突出显示和检查。

我已经安排好了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;
}