6

簡単なフォーム検証のために、jquery Web サイトで使用されているのとまったく同じ例を使用しています。 http://docs.jquery.com/Plugins/Validation

よくわからないことが 1 つあります。例のエラー メッセージは、各入力フィールドの右側に表示されます。各入力フィールドの下にエラーを表示したい。それはどのように機能しますか？幅とパディングをいじってみましたが、今のところうまくいきません。

私が使用している CSS コードは少し変更されていますが、それでも非常に単純です。

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: 0px; vertical-align: bottom; }
p { clear: both; }
fieldset {position: absolute; left: 450px; width: 400px; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

これがjfiddle http://jsfiddle.net/nBv7v/です

4

4 に答える 4

14

引用OP：「例のエラーメッセージは、各入力フィールドの右側に表示されます。各入力フィールドの下にエラーを表示したいのですが、どのように機能しますか?」

オプションを使用して、デフォルトの要素を からlabelに簡単に変更できます。「ブロックレベル」であるため、自動的に別の行に折り返されます。diverrorElementdiv

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        // your other rules and options
    });

});

実際のデモ: http://jsfiddle.net/xvAPY/

CSSをいじる必要さえありません。ただし、何かを変更する必要がある場合は、それらをターゲットにしdiv.errorます。

div.error {
    /* your rules */
}

Validate プラグイン オプションの詳細については、ドキュメントを参照してください。

于 2013-02-02T22:00:37.087 に答える
6

label要素は要素であり、要素ではありinline elementませんblock-level。つまり、デフォルトでは、label要素は新しい行を開始しません。

これを行うには、次のようにデフォルトのスタイリングをオーバーライドできます。

label.error {
    display:block;
    width:100%;
    ...
}

独自のJsFiddle デモを参照してください。

于 2013-02-02T21:55:30.987 に答える
1

display: blockonに設定する必要がありますlabel.error。このようにすると、次の行に表示されます。あとは、 にパディングを追加するlabel.errorか、表などを使用してエラーをテキスト ボックスの下に揃えるだけです。

投稿したjsFiddleでは、次の変更により、テキストボックスの下にエラーメッセージが表示されます。

label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }
于 2013-02-02T22:00:18.440 に答える
0

このクラスとこの css を使用するのと同じくらい簡単です。

.has-error input{
  background: rgba(166, 66, 66, 0.69);
}
于 2016-12-10T13:22:12.183 に答える