使用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="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