问题描述
在使用前端校验form表单时提示位置错乱:
如图:
原因分析:
jQuery默认的提示方式导致的
修改前HTML:
<div class="form-group">
<label class="col-sm-3 control-label">成效类型:<b class="must-hint">*</b></label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="effectType" value="1"/>企业</label>
<label class="radio-inline"> <input type="radio" name="effectType" value="2"/>个人</label>
</div>
</div>
修改前JQuery:
$("#signupForm").validate({
rules : {
orgName : {
required : true
},
effectType:{
required : true
},
creditCount:{
digits : true
},
loanCount:{
digits : true
}
},
messages : {
orgName : {
required : icon + "请输入机构名称"
},
effectType : {
required : icon + "请选择成效类型"
},
creditCount : {
digits : icon + "只能输入正整数"
},
loanCount : {
digits : icon + "只能输入正整数"
}
}
})
解决方案:
在需要指定具体位置的地方留一个错误提示,其余的使用默认提示方式
修改后HTML:
<div class="form-group">
<label class="col-sm-3 control-label">成效类型:<b class="must-hint">*</b></label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="effectType" value="1"/>企业</label>
<label class="radio-inline"> <input type="radio" name="effectType" value="2"/>个人</label>
<label class="hint-font" id="effectType-error"></label>
</div>
</div>
修改后JQuery:
$("#signupForm").validate({
errorPlacement: function(error, element) {
// 检查元素是否是单选框
if (element.is(":radio")) {
// 为单选框创建一个特定的错误消息容器
var errorId = element.attr("name") + "-error";
error.appendTo("#" + errorId);
}else {
// 对于其他类型的输入字段,你可以使用默认的错误放置方式
error.insertAfter(element);
}
},
rules : {
略
},
messages : {
略
}
})
页面效果: