получение идентификатора элемента

Question

Я использую плагин проверки jquery.и разработка веб-страницы с использованием различных элементов (например, div, li и т. д.).Есть вкладки (tab1, tab2, tab3 и т. Д.), И по внутренней ссылке эти вкладки содержат несколько номеров полей (field1,, field2, .... filed 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");
    });
}

Проблемы

1. Этот код работает только для одной вкладки.
2. Функция .each () принимает самый высокий индекс. Например, если есть ошибки во всех вкладках, она помечает только вкладку 'tab3', а не все вкладки.

ТакЯ хочу код, который может пометить вкладки.так как произошла соответствующая ошибка, не пометьте вкладки, которые содержат какие-либо ошибки.
Плз .. кто-нибудь помогите мнеСпасибо .. заранее ...

Answer 1

Это может быть немного сложно, чтобы помочь вам. Я не уверен, насколько вы знакомы с плагином проверки.

Вы не можете сделать это так, как хотите, потому что вам нужно проверить входные данные всех панелей и посмотреть, были ли они действительными или нет.
Единственный способ различить это, не используя внутреннюю проверку, это использовать label.error:visible и label.error:hidden, чтобы увидеть, были ли они действительными или нет. Вот где твоя первая проблема. Поскольку у вас есть вкладки, они скрыты, даже если они могут содержать ошибки.
Вот почему в вашем примере можно отметить только одну вкладку или все вкладки.

Чтобы решить эту проблему, вам необходимо заменить текущий обработчик проверки и отменить выделение, чтобы вы могли выполнить выделение и проверку самостоятельно.

Я устроил этот 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;
}