錯誤圖像不會變成成功的形象，盡顯然後清除所需的文本框後

Question

場景：

1. 離開「改爲txtName」空並提交;然後，紅色圖像將顯示在文本框旁邊。意。
2. 用數據填寫文本框而不提交，然後紅色圖像變成綠色。意。
3. 清除文本框中的數據並且不要提交。然後綠色圖像不會變成紅色。 問題！

這裏是jQuery驗證碼：

$(document).ready(function() { 
     $("#BtnSubmit").click(function() { 
      $("Form").validate({ 
       rules: { 
        <%= TxtName.UniqueID %>: { required: true } 
       }, 
       messages: { 
        <%= TxtName.UniqueID %>: { required: "Name is required" } 
       }, 
       success: function(element){ 
        $(element).addClass("checked"); 
       }, 
       errorPlacement: function(error, element) { 
        var container = $('<div />'); 
        container.addClass('MyTooltip'); 
        error.insertAfter(element); 
        error.wrap(container); 
        $("<div class='errorImage'></div>").insertAfter(error); 
       } 
      }); 
     }); 
    }); 

其中：

• 的 「errorImage」 CSS類是顯示紅色圖像的類。
• 「checked」css類是顯示綠色圖像的類。
• 「錯誤放置」部分只是在文本框旁邊顯示圖像（紅色/綠色），並且此圖像在顯示時會顯示錯誤消息的工具提示。

這裏的CSS，如果你需要看它：

div.MyTooltip { 
    position: relative !important; 
    display: inline-block; 
    top: 3px; 
    right: 0px; 
} 

div.MyTooltip:hover { 
    z-index: 1005; 
} 

div.MyTooltip label { 
    display: none !important; 
    vertical-align: middle; 
    padding: 0px; 
    line-height: 16px; 
    font-size: 11px; 
} 

div.MyTooltip:hover label.error:not(.checked) { 
    display: inline-block !important; 
    position: absolute; 
    right: 0px; 
    bottom: 24px; 
    width: 170px; 
    height: auto; 
    padding: 0px 5px 0px 5px; 
    background-color: #ff0000; 
    border-radius: 5px; 
    color: white; 
    opacity: 0.50; 
    text-align: center; 
} 

label.error + div.errorImage 
{ 
    background: url('Images/error.png') no-repeat 0px 0px; 
    display: inline-block !important; 
    width: 20px; 
    height: 20px; 
    vertical-align: middle; 
} 

label.checked + div.errorImage 
{ 
    background: url('Images/valid.png') no-repeat 0px 0px; 
    display: inline-block !important; 
    width: 22px; 
    height: 22px; 
    vertical-align: middle; 
} 

input.error, select.error { 
    /*border-width: 1px;*/ 
    border-color: tomato; 
} 

的ASP .NET HTML是：

<asp:TextBox ID="TxtBranchName" runat="server" ClientIDMode="Static"></asp:TextBox> 

Answer 1

現在我明白了。您錯誤地將按鈕click事件綁定到.validate()。這會導致各種奇怪的問題，因爲每次單擊按鈕時都會重新進行一切操作。

.validate()被初始化只DOM中一次準備。其內置的submitHandler已經負責捕獲點擊提交按鈕。

$(document).ready(function() { 
    // $("#BtnSubmit").click(function() { // <-- remove this line! 
     $("Form").validate({ 
      rules: { 
       <%= TxtName.UniqueID %>: { required: true } 
      }, 
      messages: { 
       <%= TxtName.UniqueID %>: { required: "Name is required" } 
      }, 
      success: function(element){ 
       $(element).addClass("checked"); 
      }, 
      errorPlacement: function(error, element) { 
       var container = $('<div />'); 
       container.addClass('MyTooltip'); 
       error.insertAfter(element); 
       error.wrap(container); 
       $("<div class='errorImage'></div>").insertAfter(error); 
      } 
     }); 
    // }); // <-- remove this line! 
}); 

看到一個通用的（因爲你沒有提供HTML）演示：

http://jsfiddle.net/RKSSp/

---

有關更多信息，請參閱以下：

https://stackoverflow.com/a/12989534/594235

https://stackoverflow.com/a/11068130/594235

https://stackoverflow.com/a/14107043/594235

https://stackoverflow.com/a/13692534/594235

https://stackoverflow.com/a/9936025/594235

https://stackoverflow.com/a/12101079/594235

https://stackoverflow.com/a/10609871/594235