jQueryの＆ブートストラップ入力検証、それがどのように見える

Question

：それはどうあるべきか

：

何らかの理由で、私は、入力ボックスに何かを入力するたびに、それは別のエラーグリフを追加します。誰か助けてくれますか？

HTMLコード

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-12"> 
     <div class="form-group has-feedback" id="num"> 
      <input type="text" required pattern="[a-z]{1}[0-9]{7}" name="studo_number" id="studo_number" class="form-control input-lg" placeholder="Student/docent nummer" tabindex="4" title="Het student/docent nummer moet beginnen met een kleine letter gevolgd door 7 cijfers." maxlength="8"> 
     </div> 
    </div> 
</div> 

jQueryのコード

jQuery(function() { 
    $("#studo_number").keyup(function() { 
     var VAL = this.value; 

     var studo = new RegExp('[a-z]{1}[0-9]{7}'); 

     if (studo.test(VAL)) { 
       if ($('#num').hasClass('has-error')){ 
       $(this).parent().removeClass('has-error'); 
      } 
      $('#num').addClass('has-success'); 
      $(this).addClass('has-success'); 
      $(this).after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>'); 
     } 
     else{ 
      $('#num').addClass('has-error'); 
      $(this).addClass('has-error'); 
      $(this).after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>'); 
     } 
    }); 
}); 

Answer 1

あなたkeyup、新しい要素がメソッド.after()で作成されるたびにあなたの問題があります。 ）（ `$を使用して

jQuery(function() { 
    $("#studo_number").keyup(function() { 
     var VAL = this.value; 

     var studo = new RegExp('[a-z]{1}[0-9]{7}'); 

     //Check if input is good and we not already pass in this part 
     if (studo.test(VAL) && !$('#num').hasClass('has-success')) { 
      //Remove if exist the span glyphicon-remove and the class has-error 
      if ($('#num').hasClass('has-error')){ 
       $(this).parent().find('.glyphicon-remove').remove(); 
       $(this).parent().removeClass('has-error'); 
      } 
      $('#num').addClass('has-success'); 
      $(this).addClass('has-success'); 
      $(this).after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>'); 
     } else if (!studo.test(VAL) && !$('#num').hasClass('has-error')) { 
      //Remove if exist the span glyphicon-ok and the class has-success 
      if ($('#num').hasClass('has-success')){ 
       $(this).parent().find('.glyphicon-ok').remove(); 
       $(this).parent().removeClass('has-success'); 
      } 
      $('#num').addClass('has-error'); 
      $(this).addClass('has-error'); 
      $(this).after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>'); 
     } 
    }); 
});