jQuery的驗證使用自定義的div和CSS

我有，我想在登錄錯誤消息進入一個div：jQuery的驗證使用自定義的div和CSS

<div id="loginMessage" class="blankBox">&nbsp;</div>

當有驗證錯誤，我想這個類的股利是「errorBox」。如果沒有驗證錯誤，我希望CSS是'blankBox'。

而且我有以下的jQuery驗證：

<script> 
    $(function() { 
     $("#loginForm").validate({ 
      rules: { 
       username: "required", 
       password: "required" 
      }, 
      messages: { 
       username: "Please enter a username", 
       password: "Please enter a password", 
      }, 
      errorLabelContainer: "#loginMessage", 
      wrapper: "li", 
          highlight: function(element) { 
           $(element).addClass('errorBox'); 
          }, 
          unhighlight: function(element) { 
           $(element).removeClass('errorBox'); 
          }, 
     }); 
    }); 
    </script>

不幸的是，發生的事情是，errorBox CSS被應用到輸入字段。？！？我無法得到這個工作。

任何想法？

來源

2013-03-20 Lurk21

基於從另一個回答您的評論：「我想，直到錯誤出現在它，然後重置至中性當錯誤離開它的CSS保持中立」

我不知道什麼是「中性」的意思，但默認當所有的錯誤離開容器，該插件使得容器「隱藏」。換句話說，所有重要的是容器在包含錯誤時的樣式，因爲只有當容器內部存在錯誤時纔會看到它。否則，它只是隱藏。要達到此初始狀態，請將樣式設置爲display: none;。您也可以設置其他屬性，以便在出現錯誤時查看。（請參閱jsFiddle示例）。

儘管有其他答案，errorPlacement在這種情況下並不好。它僅用於放置單個消息。它與錯誤容器內的消息無關。

我還刪除了您的highlight和unhighlight回調函數，因爲這些回調函數是以字段爲單位觸發的，並且與您的錯誤容器無關。（你也被壓倒他們用自己的功能打破了他們的默認功能。）

DEMO：http://jsfiddle.net/6dCB7/

的jQuery：

$(document).ready(function() { 

    $('#loginForm').validate({ // initialize the plugin 
     errorLabelContainer: "#loginMessage", 
     wrapper: "li", 
     rules: { 
      // your rules 
     } 
    }); 

});

HTML：

<div id="loginMessage"></div> 
<form id="loginForm"> 
    .... 
</form>

CSS：

#loginMessage { 
    display: none; 
    /* also set the properties for when it displays with errors */ 
}

來源

2013-03-20 04:28:36 Sparky

jQuery的驗證使用自定義的div和CSS

回答

相關問題