0

フォームがあり、このjquery Validation Pluginを使用して検証しています。検証は完全に機能していますが、フォーム要素の下部にエラー メッセージが表示されるという問題があります。フォーム要素の右側に表示しようとしています。

手伝っていただけませんか？

jsfiddleでコード全体を確認してください

マイフォーム

<form id="commentForm" class="form-horizontal" method="post">
    <div class="control-group">
      <label class="control-label" for="input">Name <span style="color: red;">*</span></label>
       <div class="controls">
        <input type="text" name="name" class="input-small required" id="name" value="" />
        </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="input">Email <span style="color: red;">*</span></label>
       <div class="controls">
        <input type="text" name="name" class="input-small required email" id="email" value="" />
        </div>
    </div>

    <input type="submit" class="btn" value="submit"  />

</form>

エラー用CSS

form label.error{font:10px Tahoma,sans-serif;color:#ED7476;margin-left:5px}
form input.error,form input.error:hover,form input.error:focus,form select.error,
form textarea.error{border:1px solid #ED7476;background:#FFEDED}
4

2 に答える 2

4

この問題は、cssdisplay:inline;でクラスにを指定することで解決できます。label.error

form label.error{
    font:10px Tahoma,sans-serif;
    color:#ED7476;
    margin-left:5px;
    display:inline;
}

ここで変更されたフィドルのサンプルを確認してください。

于 2013-02-22T07:09:54.647 に答える
1

display: inline-blockまたはを使用display: inlineしてスパンエラー

form label.error { display:inline-block;
font:10px Tahoma,sans-serif;
color:#ED7476;
margin-left:5px }

デモ

于 2013-02-22T07:10:53.153 に答える