要素のIDを取得する

Question

jquery validationプラグインを使用しています。さまざまな要素（div、liなど）を使用してウェブページを設計することです。 タブ（tab1、tab2、tab3など）と内部リンクを通じて、これらのタブにはいくつかのフィールド（field1、field2、.... filed n）が含まれています。

実際には、「必須」フィールドが見つからない場合は、タブのbg-color（「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 ..誰かが私を助けます。 Thanx .. in advance ...

Answer 1

これは少し手間がかかります。私はあなたがプラグインの検証にどれほど親しみがあるか分かりません。

すべてのパネルの入力を確認し、有効かどうかを確認する必要があるため、実際にはできません。
内部検証を使用せずにそれを区別する唯一の方法は、label.error:visibleとlabel.error:hiddenを使用して有効かどうかを確認することです。それはあなたの最初の問題がある場所です。タブがあるので、エラーが発生しても隠されています。
あなたの例では、1つのタブまたはすべてのタブのみをマークできます。

これを解決するには、現在の検証ハンドラを置き換えてハイライトを解除する必要があります。これにより、自分でハイライトやチェックを行うことができます。

私は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; 
}