JQuery 验证消息奇怪地出现在两个单选按钮之间
Posted
技术标签:
【中文标题】JQuery 验证消息奇怪地出现在两个单选按钮之间【英文标题】：JQuery validation message appearing weirdly between two radio buttons 【发布时间】：2015-07-16 22:13:00 【问题描述】：我正在使用 JQuery Validation 插件来验证我的表单。除单选按钮外，所有字段的验证消息都正确显示在相应字段下方。但对于单选按钮，消息显示在前两个单选按钮之间。
gender :
required : true
<html:radio property="gender" value="1"
name="formBean" styleId="gender"> Male </html:radio>
<html:radio property="gender" value="0"
name="formBean" styleId="gender"> Female </html:radio>
单选按钮之后或下方是否显示错误消息？
提前致谢。
【问题讨论】：
您能否提供呈现的 HTML 而不是服务器端标记？你能在 jsFiddle 上复制问题吗？ 最简单的方法是应用 CSS 将警报消息定位到这些收音机 您是否尝试过为错误消息使用标签标签？渲染后应如下所示：<label for="formBean" class="error" style="display:none;">。您可能需要 "formBean": required:true 作为规则而不是性别。
创建一个带有性别属性的空 div 以在其中显示验证消息..您正在尝试使用性别属性在 html 标记内插入验证消息..分隔标签可以解决您的问题
【参考方案1】：
<html>
<body>
<style>
.errorMsq
color: red;
</style>
<form>
<div>
<input type="radio" name="gender" value="male">male
<input type="radio" name="gender" value="female">female
</div>
<br>
<button type="button">check</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
$('form').validate(
rules:
gender: required: true,
,
errorPlacement: function(label, element)
label.addClass('errorMsq');
element.parent().append(label);
,
);
$('button').click(function ()
$('form').valid();
);
</script>
</body>
</html>
结果应该是这样的：
【讨论】：
以上是关于JQuery 验证消息奇怪地出现在两个单选按钮之间的主要内容，如果未能解决你的问题，请参考以下文章