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

Posted 2020-11-30 ℡正儿八经

 

<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">&nbsp;&nbsp;
        <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