Question

我正在使用jquery验证插件。并使用各种元素（例如div，li等）设计网页。有标签（tab1，tab2，tab3等），通过内部链接，这些标签包含几个字段（field1，field2，....字段n）。

实际上，如果错过任何“必需”字段，我想将标签的bg颜色（例如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");
    });
}

问题是

此代码仅适用于一个标签。
.each（）函数获取最高索引。例如，如果所有选项卡中都有错误，则它仅标记'tab3'选项卡而不是所有选项卡。

所以我想要能够标记选项卡的代码。因为发生了相应的错误，也没有标记包含任何错误的标签 Plz ..有人帮助我。 Thanx ..提前...

Answer 1

这可能对您有所帮助。我不确定你对validate插件有多熟悉。

你不能按照你想要的方式去做，因为你需要检查所有面板的输入并查看它们是否有效。
在不使用内部验证的情况下区分它的唯一方法是使用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;
}

得到元素的Id

1 个答案: