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

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

你能帮我吗？

检查整个代码我的表格

<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}

来源

2013-02-22 black_belt

这个问题可以通过给display:inline;到label.error类CSS来解决。

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

Check out the modified fiddle sample here。

来源

2013-02-22 07:09:54

感谢很多人。它的工作:) – 2013-02-22 07:14:58

使用display: inline-block或display: inline的量程误差

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

demo

来源

2013-02-22 07:10:53

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

回答

相关问题