jquery - jQueryの検証-生成されたエラーラベルをdivの最後に表示する方法

Question

私はこのような状況にあります：

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>Text</label>
  <input type="text" id="name">
</div>

jQuery検証ライブラリを使用して（検証にすべてのデフォルトを使用）、電子メールの「エラー」ラベルは次のように生成されます。

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>ERROR:|</label>
  <label>Text</label>
  <input type="text" id="name">
</div>

しかし、私の目標は次のようにすることです。

<div>
  <label>Text</label>
  <input type="text" id="email">
  <label>Text</label>
  <input type="text" id="name">
  <label>ERROR:|</label>
</div>

どうすればよいですか？

jQuery検証ライブラリ

編集： invalidHandlerイベントからラベルを追加するだけで発生する問題は、invalidHandlerイベントが終了するまでラベルが生成されないことです。

Answer 1

検証ライブラリにerrorPlacement関数があります。

$('.inputForm').validate({
   ... settings ....
   errorPlacement: function(error, element) {
      error.appendTo(element.parent());
   },
   ... other settings ...
});

Answer 2

メインのDivにIDを割り当ててから、そのDivにエラーを追加するだけです。例えば

$（ "div＃divid"）。append（ "error"）;

Answer 3

jQuery検証プラグインは、最初に独自のラベルを追加しない限り、常にエラーラベルを付加します。それで...

<div>
 <label>Text</label>
 <input type="text" id="email">
 <label class="error" style="display:none"></label>

 <label>Text</label>
 <input type="text" id="name">
 <label class="error" style="display:none"></label>
</div>

プラグインが使用しているものと同じクラスを設定し、デフォルトで要素を非表示にするようにしてください。