一、问题描述
使用validate插件校验表单信息时,当校验不通过显示的提示信息默认是追加在被验证对象之后的,不美观。
示例:
二、原因分析
validate插件默认的显示位置。
三、解决措施
1、在validate(json数据格式)里面的json数据格式的rules、messages后,增加同级代码errorPlacement: function(error, element){},其中error表示提示信息的标签,element代表被校验的标签。
2、根据前面例子里面可看出,提示信息的标签需要添加至被校验标签的父标签的父标签上(即<div class="form-group")下,因此可通过提示标签的appendTo方法来追加标签。代码如下:
errorPlacement:function(error,element){
error.appendTo(element.parent().parent());
}
3、validate校验完整代码如下:
$("#registerform").validate({
rules:{//校验规则关键字
username:{//需要校验的输入框名称(注意:输入框只能通过其name属性获得,无法通过ID等方式获得)
required:true,//是否必须填写
rangelength:[3,12]//长度要求
},
password:{
required:true
},
confirmpwd:{
required:true,
equalTo:"#password"
}
},
messages:{//校验不通过时的提示信息
username:{//与规则里面的名称对应
required:"用户名不能为空!",//校验不通过的提示信息(这里是必填而未填的提示信息)
rangelength:$.validator.format("用户名长度在必须为:{0}-{1}之间")//校验不通过的提示信息(这里是长度不符合要求)
},
password:{
required:"密码不能为空!"
},
confirmpwd:{
required:"确认密码不能为空!",
equalTo:"两次密码不一致"
}
},
errorPlacement:function(error,element){
error.appendTo(element.parent().parent());
}
});