<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="117" height="90" ></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>
参考链接：https://blog.csdn.net/wobenziyou/article/details/48048339