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 回答