使用validate进行表单验证时土方法(appendTo)改变error显示的位置

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">使用validate进行表单验证时会出现error显示位置非所要求位置的现象,此时的解决方法是:</span>

1.所需要显示error message 的位置定义好无内容的div,并通过设置宽高"占位"(此时可能会用到position:absolute);

2.使用errorPlacement判断哪个error message 放在什么位置,例如,

errorPlacement: function(error, element) {

if(element.attr("id")=="shoujihaoma"){

error.appendTo("#error_message_1");

}

以上就会把输入框id为shuojihaoma的error message 显示在id为error_message_1的位置上.

除了appendTo添加到容器内,还可以使用insertAfter添加到容器后.

自己的代码：javascript

$(document).ready(function() {
$("#loginForm").validate({
rules: {
validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
},
messages: {
username: {required: "请填写用户名."},password: {required: "请填写密码."},
validateCode: {remote: "验证码不正确.", required: "请填写验证码."}
},
errorLabelContainer: "#messageBox",
errorPlacement: function(error, element) {
error.appendTo($("#loginError").parent());
}
});
});

使用js的html代码

<div class="header">
<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}"><button data-dismiss="alert" class="close">×</button>
<label id="loginError" class="error">${message}</label>
</div>
<p style="text-align:left; padding-left:50px"><img src="${ctxStatic}/bigdata/login/images/3.png" width="" height="" ></p>
</div>
<p class="form-signin-heading"></p>
<form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
<INPUT name="username" class="input-block-level required" id="username" value="${username}" type="text" placeholder="请输入登录名" style="height:60px; width:80%; margin-left:60px; margin-top:20px; padding-left:60px; background:url(${ctxStatic}/bigdata/login/images/24.png) 10px 15px no-repeat #FFF" >
<INPUT name="password" class="input-block-level required" id="password" type="password" placeholder="请输入密码" style="height:60px; width:80%;margin-left:60px; padding-left:20px;padding-left:60px; background:url(${ctxStatic}/bigdata/login/images/25.png) 10px 18px no-repeat #FFF ">
<INPUT class="btn btn-primary" onclick="passwdEncryption();" type="submit" value="登录" style="width:80%; height:50px; margin-left:60px">  
<c:if test="${isValidateCodeLogin}">
<div class="validateCode">
<label class="input-label mid" for="validateCode">验证码</label>
<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
</div>
</c:if>
<LABEL title="下次不需要再登录" for="rememberMe" style=" padding-left:260px; padding-top:20px"><INPUT name="rememberMe" ${rememberMe ? 'checked' : ''} id="rememberMe" type="checkbox"> 记住我（公共场所慎用）</LABEL>
</form>