使用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; 
    } 
    }); 
});