4

次のようなフォームの Jquery 検証があります。

$(this.initVariables.formId).validate({
     errorElement: "div",
     errorPlacement: function(error, element) {
        error.insertBefore(element.parent());
     }
}

問題は、エラーが表示されると、次のようにフォームが歪むことです。 ここに画像の説明を入力

私がやりたいことは、次のように隣接フィールドをエラーフィールドと同じ行に効果的に調整することです: ここに画像の説明を入力

div の HTML コードは次のとおりです。

<div class="relatedField>
    <div id="wwgrp_addForm_summaryData_firstName" class="wwgrp" style="float: left; padding-right: 6px;">
          <div id="wwlbl_addForm_summaryData_firstName" class="wwlbl"> 
              <label class="label" for="addForm_summaryData_lastName"> FIRST NAME </label>
          </div>
          <div id="wwctrl_addForm_summaryData_firstName" class="wwctrl">
               <input id="addForm_summaryData_firstName" class="storedPaymentInput_size4 alphabet" type="text" value="" name="summaryData.firstName">
          </div>
    </div>
    <div id="wwgrp_addForm_summaryData_lastName" class="wwgrp" style="float: left; padding-right: 6px;">
          <div id="wwlbl_addForm_summaryData_lastName" class="wwlbl"> 
              <label class="label" for="addForm_summaryData_lastName"> LAST NAME </label>
          </div>
          <div id="wwctrl_addForm_summaryData_lastName" class="wwctrl">
               <input id="addForm_summaryData_lastName" class="storedPaymentInput_size4 alphabet" type="text" value="" name="summaryData.lastName">
          </div>
    </div>
</div>

フォームの実装を変更せずに jquery を使用してこれを行うにはどうすればよいですか。私はこの横にたくさんのフィールドを持っています。助けてください。ありがとうございました。

私の解決策は

 errorPlacement: function(error, element) {
     error.insertBefore(element.parent());
     element.parent().parent().siblings().each( function () {
           var child = $(this).children("div.wwctrl");
        $("<div class='SPACE'>&nbsp;</div>").insertBefore(child);
      });
 }

しかし、ご覧のとおり、クリーンではなく、正しい検証の後、div スペースは削除されません。

ここに画像の説明を入力

これをより良く行う方法についてのアイデア。

ありがとうございました。

4

6 に答える 6

1

クリーンな検証を確認するときは、他のエラー ボックスを見て、HTML エラーが空かどうかを確認します。空の場合は、削除します。これはまだハッキーな作業ですが。

element.parent().parent().siblings.each( CheckEmpty );

function CheckEmpty() {
    if ( $( this ).html()=="&nbsp;" ) {
        $( this ).remove();
    }
}

または、空のエラー メッセージごとに特定のクラスを指定すると、そのクラス名を持つすべての要素を単純に削除できます。ただし、これはそれらすべてを削除するため、より面倒な場合があります。複数のフィールド行にエラーがある場合、1 つを修正するとすべてが削除されるため、これは機能しません。

$( ".blank" ).remove();
于 2012-10-03T19:34:59.873 に答える
1

ページへのリンクをまだ投稿していないので、仕事をする可能性のある悪い答えを想定して提案する以外に選択肢はありません。

これを行う：

$(this.initVariables.formId).validate({
     errorElement: "div",
     errorPlacement: function(error, element) {
         error.insertBefore(element.parent());
         error.insertBefore(element.parent().siblings());

         //Insert something here that will overlay all the other errors
         //a div maybe, with opacity=1 leading them to be not visible.

     }
}

絶対位置で div を使用することを忘れないでください。そうしないと、同じ状況になります。

たぶん、これは私が何を意味するかをあなたに理解させるでしょう、例

于 2012-10-03T19:21:20.857 に答える
1

「ALPHABETS ONLY!」の高さを見るとどうなるでしょうか。要素を押し下げて、他の入力フィールドの上部にそれだけのパディング/マージンを追加するだけですか?

この方法では、新しい要素を作成することは避けられますが、「ALPHABETS ONLY!」を取り除くときは、このマージン/パディングを忘れずに削除する必要があります。エレメント。

于 2012-10-03T19:42:27.963 に答える
0

全体をテーブルに並べます。この new の<tr>内部にエラーを挿入して表示します。私は非常に明確だったと思います。<td><tr>

于 2012-10-03T20:35:50.560 に答える