在每个按键事件上，我都是验证文本框值并附加错误消息

Question

$(street2_id).bind("keypress", function(e) {

            var street1_Length = $(street1_id).val().length;
            var street2_Length = $(street2_id).val().length;

            var total_street_char = street1_Length + street2_Length;

            if(total_street_char > 30){
                $(".shipping_street2").append('<div><span>Error Message</span></div>');
                $(street2_id).focus();

            }
        });

在每个keypress事件上，我正在验证文本框值并附加错误消息，但是问题出在附加（多个）错误消息生成的每个按键事件上。 （我只想要一次）

我只想要一条错误消息。

我该如何实现？

Answer 1

[就像Shree的评论一样，我们可以先清除shipping_street2类中的元素。另外，最好使用on keydown，以便在按下Backspace键时也会清除错误消息。这是我的尝试。

$(street2_id).on("keydown", function(e) {
 
  var street1_Length = $(street1_id).val().length;
  var street2_Length = $(street2_id).val().length;

  var total_street_char = street1_Length + street2_Length;


  if (total_street_char > 30) {
    $(".shipping_street2").html('');
    $(".shipping_street2").append('<div class="error"><span>Error Message</span></div>');
    $(street2_id).focus();
  } else {
    $(".shipping_street2").html('');
  }
  
});

.error span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shipping_street2"></div>
<input id="street1_id" type="text">
<input id="street2_id" type="text">

Answer 2

var once = false;

$(street2_id).bind("keypress", function(e) {

        var street1_Length = $(street1_id).val().length;
        var street2_Length = $(street2_id).val().length;

        var total_street_char = street1_Length + street2_Length;

        if(total_street_char > 30){
        if (!once || ! $('.street2_error_span').length) {
            $(".shipping_street2").append('<div><span>Error Message</span></div>');
            $(street2_id).focus();
            once = true;
            }

        }
    });

Reference