Jquery ErrorPlacementとPosition：Absolute

Question

Validation Plugin（See this Fiddle）のAjax errorPlacementに問題があります。 ErrorPlacementとの位置：絶対的なは、間違った場所にポップアップするように強制しています。

ユーザーがまだ情報を入力していない場合は、エラーメッセージが正しい位置にポップアップ表示されます（入力フィールドの右側に赤いテキストで表示されます）。ただし、ユーザーが情報を入力してから削除すると、ajaxアラート（「このフィールドは必須です」）が想定される場所の下のフィールドに間違った場所にポップアップします。問題を表示するには、すべてのフィールドを正しく入力してから、名前を削除します。メールフィールドに「このフィールドは必須です」というメッセージが表示されますが、名前フィールドにはこのフィールドが含まれています。

検証を制御JSがある：

$(document).ready(function() { 
     errorPlacement: function(error, element) { 
       error.insertAfter(element).position({ 
        my:'right top', 
        at:'right top', 
        of:element   
       }); 
        error.fadeOut(3000); 
     } 
    }); 
}); 

それが問題を引き起こしているCSSは次のとおりです。

label.error { position:absolute;} 

私はエラーをオーバー浮くことができるように、このCSSを含める必要が入力フィールド。問題を確認するにはFiddleを参照してください。ありがとうございました！次のように

Answer 1

はちょうどあなたのCSSを修正：

でも念のためにIEでテスト

form p { 
    position: relative; /* This ensures error label is positioned within the p tag */ 
} 
label.error { 
    top: 0; /* This ensures that it lines up with the top of the input */ 
    right:90px; 
    color: red; 
    position:absolute; 
} 

...

Answer 2

ニックは、あなたがポイントを逃してきた（私はこれについてあなたのprevious questionに答え）。 jQuery UIにはPositionユーティリティがあります。それは私があなたがそれらをしたい場所にラベルを配置するために使用していたものです。したがって、jsFiddleの唯一の「エラー」は、リソースの下にある「jQuery UI」ボックスをチェックしなかったことです。 jsfiddleのバージョンを作成しました：90pxのものを削除し、jQueryのUIボックスをチェックしました。それでおしまい。

エラーのある要素に対してラベルの配置を変更する場合は、上記のリンク先の位置ユーティリティでoffsetオプションを確認してください。