0

検証プラグインのAjaxerrorPlacementに問題があります（このフィドルを参照）。ErrorPlacementとposition：absoluteを組み合わせると、ajax検証応答が間違った場所にポップアップ表示されます。

ユーザーがまだ情報を入力していない場合、エラーメッセージは正しい位置にポップアップ表示されます（赤いテキストで入力フィールドの右側に表示されます）。ただし、ユーザーが情報を入力してから削除すると、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を含める必要があります。問題を確認するには、フィドルを参照してください。ありがとうございました！

4

2 に答える 2

1

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

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

于 2012-03-14T15:56:15.497 に答える
1

CSS を次のように修正するだけです。

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

念のためにIEでもテストしました...

于 2012-03-14T02:29:53.593 に答える