使用jQuery显示错误消息并使其消失

Question

Below is a simple jQuery code for showing error messages on submission of form, if the given conditions are not fulfilled. This works fine and shows error messages on form submission but I want to change it to keyup function which seems easy, changing $('#submit').click(function() { to $("input").keyup(function(){ works. Now problem is error messages appears on keyup if condition is not fulfilled but does not disappear if condition is fulfilled until I go to next input leaving some error so that inputs error message appears. So what changes I need to make in my code so that error message appearing on keyup disappera as soon as that condition is fulfilled.

<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

Try to .empty() the error message initially in the event handler,

 $('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;
     }
   });
 });