4

jqueryフォームに問題があります。フォームを作成しているこのフィドルを見ると、入力フィールドが作成されてから削除された後、アラートメッセージが次の要素（最初に配置された場所の下）にポップアップし始めます。

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

検証を制御するjsは次のとおりです。

$(document).ready(function() {
    $('#commentForm').validate({
        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: $(this).serialize(),
                success: function(returnedData) {
                    $('#commentForm').append(returnedData);
                }
            });         
            return false;
        },
        errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
         }  
    }); 
});

編集1：Jquery NoConflictモードを使用しても、この問題は解決されていません。2つのプラグインがどのように連携するかという問題があるようです。

編集2：この問題には実際には2つの解決策があります。1つは、jquery UIスクリプトをヘッドに含めることです。これにより、その「position」ユーティリティがエラーメッセージを「右上」に揃えることができます。

他の数人の寄稿者が指摘しているように、他の解決策は、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;
}

すべての入力に感謝します。

4

5 に答える 5

3

私にはスタイリングの問題のように見えます（しかし、繰り返しますが、すべてが間違って使用されています:)、これは、float：leftをキャンセルします-http: //jsfiddle.net/kmJ87/17/

あなたが本当にposition：absoluteに執着しているなら（おそらく素敵なボックスメッセージのように、完全なcssでより多くのスタイリング？）、親要素（この場合は段落）にposition：relativeを追加することで修正できます-http：// jsfiddle.net/kmJ87/18/

于 2012-03-15T01:39:59.190 に答える
3

問題は部分的にCSS宣言にあります：

/* Begin first declaration for <label class="error" /> */
label.error {
    color: red;
    position:absolute;
}
/* Begin second declaration for <label class="error" />. Nothing inherently wrong with this, but a bit odd considering the simplified fiddle.*/
label.error {
    float: left;    /* Kinda replaces previously declared absolute position as "float" and "position" are kinda, but not really, mutually exclusive properties. */
    right: 30px;    /* Useless declaration (for now) as "right" is used wih "position" not "float". */
    color: #ff714d;
    position: absolute; /* Replaces previously declared float and makes the previously assigned "right" property useful again. */
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

position: absolute;は最後の宣言（位置v。float宣言）であるため、要素は絶対的に配置されます。

問題の最初の部分は、topプロパティが宣言されておらずdisplay、ラベルのがblockであるため、ブラウザが次の行の上部を下に配置することです（上部は静的フローのどこにありますか）。

問題の2番目の部分は、aが宣言された後も、ブラウザーが要素をfloat試行することです（これも、ブラウザーが次の行の一番上を下に配置することで終了します）。float

float解決策（これまでのところ）は、宣言を削除し、スタイリングtopでのを宣言することです。0label.error

label.error {
    color: red;
    position:absolute;
}

label.error {
    top: 0;     /* Replaces "float: left;" and fixes the display. */
    right:30px;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

または単一の宣言で：

label.error {
    color: red;
    position: absolute;
    right: 30px;
    top: 0;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

これにコードを更新すると、最後の問題が発生します。これは、すべてのエラーメッセージがドキュメントの最上部に表示されるようになることです。

これは、position: absolute;絶対的に配置された要素が通常のドキュメントフローから削除され、静的に配置されていない最も近い祖先要素に（絶対的に）配置されるという宣言が原因で発生します。

この場合、何もないので、<label class="error" />要素は絶対にに配置され<body />ます。したがって、ソリューションの最後の部分は、p要素を非静的に配置することです（エラーが絶対的に配置される場所です）。

最終的なCSS：

p {
    position: relative;
}

label.error {
    color: red;
    position: absolute;
    right: 30px;
    top: 0;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

更新された（そして機能している）フィドル。

于 2012-03-17T00:15:33.773 に答える
2

jcps javascriptは、オブジェクトを定義するだけで、実際にはどこにも使用されていないため、ページに影響を与えることはありません（まだ）。コードをいじっていたとき、jcpsjavascriptがコメントアウトされていても問題が発生しました。

ブラウザは、段落を相対位置のdivに変更し、エラーのスタイル設定に上位0pxを追加することで、段落内のラベルのレイアウトに問題があるように見えました。バリデーターにはまだ断続的な問題があることに気づきましたが、おそらくいくつかのマイナーなバグが原因です。

これは私が今のところ最終的に使用したバージョンです：http：//jsfiddle.net/kmJ87/20/

于 2012-03-16T23:02:32.933 に答える
1

document.readyメソッドを2つの方法で宣言できます

  1. $（document）.ready（function（）{

    //コードはここにあります

    }）; ここで、$はグローバル変数であり、jQueryオブジェクトを参照します。

  2. jQuery（document）.ready（function（$）{

    //コードはここにあります

    }）; //ここで、$はローカル変数であり、jQueryオブジェクトを参照します。

このリンクの5番目のポイントを確認してください：http： //net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

于 2012-03-13T11:07:04.963 に答える
0

多くのJavaScriptライブラリは、jQueryと同様に、関数または変数名として$を使用します。jQueryの場合、$はjQueryの単なるエイリアスであるため、$を使用しなくてもすべての機能を利用できます。jQueryと一緒に別のJavaScriptライブラリを使用する必要がある場合は、jQuery.noConflict（）を呼び出して、$の制御を他のライブラリに戻すことができます。

ここの例を参照してください：

 jQuery.noConflict();
 (function($)
  {
     // your code goes here
 })
(jQuery);

試してみてください

于 2012-03-09T18:57:44.457 に答える