Question

下面是一个简单的jQuery代码，用于在未满足给定条件的情况下显示提交表单时的错误消息。这很好，并在表单提交时显示错误消息，但我想将其更改为keyup函数，这似乎很容易，将$('#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;
     }
   });
 });

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

1 个答案: