Jquery Input Field Validation：入力キー押下イベントのクラス名で最も近いスパンを見つける方法

Question

数字だけを取る入力のスパンに警告メッセージを表示したい。私はspanのためにクラスを使用しています。番号のみが必要です。

$(document).ready(function() { 
 
     //called when key is pressed in input of class number_only 
 
     $(".number_only").keypress(function (e) { 
 
    \t \t //if the letter is not digit then display error and don't type anything 
 
    \t \t if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) { 
 
    \t \t \t //display error message 
 
    \t \t \t $(this).closest('.errmsg').html("Digits and single dot Only").show().fadeOut("slow"); 
 
    \t \t \t return false; 
 
    \t \t } 
 
     }); 
 
    });

.errmsg { 
 
     color: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group" style=""> 
 
     <input type="text" id='input_1' class="form-control number_only"> 
 
     <span class="errmsg"></span> \t 
 
    </div> 
 
    <div class="input-group" style=""> 
 
     <input type="text" id='input_2' class="form-control number_only"> 
 
     <span class="errmsg"></span> \t 
 
    </div> 
 
    <div class="input-group" style=""> 
 
     <input type="text" id='input_3' class="form-control number_only"> 
 
     <span class="errmsg"></span> \t 
 
    </div>

上記のコードに最も近いスパンを取得されていません。ここで

は、HTML & CSSがあります。助けてください。親のための

Answer 1

を使用してみてくださいここ

使用する必要があります。その次の最も近い要素を検索する。

$(document).ready(function() { 
 
     //called when key is pressed in input of class number_only 
 
     $(".number_only").keypress(function (e) { 
 
    \t \t //if the letter is not digit then display error and don't type anything 
 
    \t \t if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) { 
 
    \t \t \t //display error message 
 
    \t \t \t $(this).next('.errmsg').html("Digits and single dot Only").show().fadeOut("slow"); 
 
    \t \t \t return false; 
 
    \t \t } 
 
     }); 
 
    });

.errmsg { 
 
     color: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group" style=""> 
 
     <input type="text" id='input_1' class="form-control number_only"> 
 
     <span class="errmsg"></span> \t 
 
    </div> 
 
    <div class="input-group" style=""> 
 
     <input type="text" id='input_2' class="form-control number_only"> 
 
     <span class="errmsg"></span> \t 
 
    </div> 
 
    <div class="input-group" style=""> 
 
     <input type="text" id='input_3' class="form-control number_only"> 
 
     <span class="errmsg"></span> \t 
 
    </div>

Answer 2

closest検索は、.siblings()next()の代わりclosest()でこれ

$(document).ready(function() { 
    //called when key is pressed in input of class number_only 
    $(".number_only").keypress(function (e) { 
     //if the letter is not digit then display error and don't type anything 
     if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) { 
      //display error message 
      $(this).siblings('.errmsg').html("Digits and single dot Only").show().fadeOut("slow"); 
      return false; 
     } 
    }); 
}); 

jQuery Documentation