使用jQuery顯示錯誤消息並使其消失

Question

下面是一個簡單的jQuery代碼，用於在提交表單時顯示錯誤消息（如果給定條件未滿足）。這工作正常，並顯示錯誤消息表單提交，但我想改變它的鍵盤功能，這似乎很容易，改變$('#submit').click(function() {至$("input").keyup(function(){作品。現在問題是keyup上出現錯誤消息，如果條件未滿足，但條件滿足時不會消失，直到我轉到下一個輸入時留下一些錯誤，以便輸入錯誤消息出現。因此，我需要在代碼中進行哪些更改，以便在條件滿足時出現在keyup上的錯誤消息消失。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#submit').click(function() { 
     var title = document.getElementById('title').value; 
     var category = document.getElementById('category').value;  
     if (category == "") { 
      $('#er').html('Oops! Please select a category from the options.'); 
      return false; 
      } 
      else if (title == "") { 
      $('#er').html('Oops! Title cannot be empty.'); 
      return false; 
      } 
      else if (title.length > 100 || title.length < 5) { 
      $('#er').html('Oops! Make sure title is 5 to 100 characters long.'); 
      return false; 
     } 
     }); 
    }); 
</script> 

Answer 1

嘗試.empty()最初的錯誤消息，在事件處理程序，

$('input').keyup(function() {  
    var title = document.getElementById('title').value; 
    var category = document.getElementById('category').value; 
    var error = $('#er').empty(); 
    if (category == "") { 
     error.html('Oops! Please select a category from the options.'); 
     return false; 
     } 
     else if (title == "") { 
     error.html('Oops! Title cannot be empty.'); 
     return false; 
     } 
     else if (title.length > 100 || title.length < 5) { 
     error.html('Oops! Make sure title is 5 to 100 characters long.'); 
     return false; 
    } 
    }); 
});