61,111
社区成员
发帖
与我相关
我的任务
分享请教 如何让jquery.validate 的输入错误提示和输入框同行显示？
如题。主要代码如下所示，但是，现在错误提示都是在文本框下面，怎样才能让它和Input同行显示，请各位前辈高手指教，不胜感激！！
<style>
.FT_form ul {
float:left;
text-align:left;
width:500px;
list-style-type:none;
list-style-position:outside;
margin:0 0 0 20px;
padding:0px;
}
.FT_form li {
display: block;
text-align:left;
padding:12px 0 12px 12px;
border-bottom:0px solid #ACACD7;
position:relative;
width:300px;
z-index:2;
}
/*字段验证样式 字段label*/
label.error {
display:inline-block;
float:left;
font-size:11px;
text-align:left;
width:50px;
}
</style>
<script src="jquery/dist/jquery.validate.js"></script>
<script src="jquery/dist/jquery.validate.min.js"></script>
<script src="jquery/dist/localization/messages_zh.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#frm1").validate({
/*errorElement: 'span',
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},*/
rules: {
txt_cname: { required:true, maxlength:10}
},
message: {
txt_cname: { required:"用户名不能为空", maxlenghth: "人名不能超过30字符"}
}
})
});
</script>
<form class="FT_form" id="frm1" name="frm1" method="post">
<ul>
<li>
<label for="txt_cname">* 客户姓名（必填）：</label>
<input type="text" id="txt_cname" name="txt_cname" required />
</li>
</ul>
</form>
...全文
请发表友善的回复…
发表回复
winzond 2019-01-05
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>winzond 2019-01-05
- 打赏
- 举报
原因：li下的label和input标签继承了li的CSS，变成了块级元素，其实你按教程去，是不需要设置CSS就可以的，我觉得你弄得太复杂了
.FT_form li label, .FT_form li label input{
display: inline-block; /*改这里试试吧，也不知道有没有用*/
}
label.error {
display:inline-block;
/*float:left; 不能要浮动*/
font-size:11px;
text-align:left;
width:50px;
}
<p>
<label for="txt_cname">* 客户姓名（必填）：</label>
<input type="text" id="txt_cname" name="txt_cname" required />
</p>
sspanzervor1 2019-01-05
- 打赏
- 举报
找到原因了，是Li元素宽度的问题，但现在又出现了一个新问题：
就是error显示在Input的左侧而非右侧，请教大家这个应该如何调整，都设为float:left 貌似也不行……
sspanzervor1 2019-01-05
- 打赏
- 举报
请各位前辈高手多多指教～非常感谢～
