1

テキストボックスを適切に並べるために CSS でスタイルを設定したフォームがあります。フォームでjQuery Validationを使用しています。フォームを送信すると、検証でエラーが発生するため、レイアウトの問題が発生します。私のCSSは次のとおりです。

#form p label {
    padding-top: 5px;
    display: block;
    width: 100px;
    float: left;
}

float: left;が問題を引き起こしていることはわかっています。レイアウトを変更せずに各テキストボックスの横に表示されるエラーを探しています。jQuery Validation エラーのクラスは.errors. 問題を再現するためにjsFiddleを作成しました。

4

2 に答える 2

0

エラー要素で絶対位置を使用すると、エラーが発生してもフォームを変更しないで済みます。ただし、フォームの表示を維持するには、追加のマークアップが必要になります。この例では<span class="item"></span>、エラー要素の位置境界を提供するために、入力フィールドに のラッパーが追加されました。

要素に設定されたプロパティはlabel、エラー ラベルにも影響することに注意してください。

例については、 http://jsfiddle.net/K5fR8/3/を参照してください。

完全なマークアップは次のとおりです。

HTML

<form id="form" action="" method="post">
<p>
    <label for="email">Email:</label>
    <span class="item">
        <input type="text" name="email" id="email" placeholder="Email" value="" class="required" />
    </span>
</p>
<p>
    <label for="password">Password:</label>
    <span class="item">
        <input type="password" name="password" id="password" placeholder="Password" value="" class="required" />
    </span>
</p>
<p>
    <label for=""></label>
    <input type="submit" name="submit" id="submit" value="Log In" class="button" />
</p>

CSS

#form p label {
    padding-top: 5px;
    display: block;
    width: 100px;
    float: left;
}

#form p .item {
    position: relative;
}

#form p .item label.error {
    float: none;
    position: absolute;
    top: 0;
    right: -100px; /* Offset by width set on label element */
    padding: 0px;
}
于 2013-03-21T00:21:11.070 に答える
0

要素の CSSはページ上のすべてlabelの要素を対象としているため、フォーム エラーを表示するためにプラグインで使用される要素を上書きしています。 labellabel

この CSS を追加するだけで、他の要素に影響を与えることなくlabel、プラグインで使用される要素のみがデフォルト値に戻されますlabel。

#form p label.error {
    float: none;
    display: inline;
}

デモ: http://jsfiddle.net/4Wspp/

編集：

私の答えはあなたの質問を解決しますが、jQuery をさらに活用したい場合は、jQuery プラグインを使用して派手なツールチップを使用する別のオプションを確認する必要があります。

デモ: http://jsfiddle.net/kyK4G/

このSOの回答から： https://stackoverflow.com/a/14741689/594235

于 2013-03-21T01:28:33.200 に答える