Question

我有一个表单，我正在使用此jquery Validation Plugin来验证它。验证工作正常但问题是错误消息显示在表单元素的底部。我试图在表单元素的右侧显示它。

你能帮我吗？

上的整个代码

我的表格

<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 for error

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}

Answer 1

问题可以通过将display:inline;提供给css中的label.error类来解决。

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

Check out the modified fiddle sample here

Answer 2

使用display: inline-block或display: inline进行跨度错误

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

demo

在表单元素的右侧显示Jquery表单验证错误消息

2 个答案: