jqueryとdisplay divを使用してパターンに対して入力ボックスを検証する

Question

あるパターンで入力が必要なテキストボックスがたくさんあります。 jqueryの読み込みでは、私が扱っているそれぞれのテキストボックスにパターン属性を付けます。 私が今達成しようとしているのは、テキストボックスに入力してフォーカスを失った後に、パターンに対してテストし、パターンに一致しない場合にエラーボックスを表示するdivを表示したいときです。私はどのようにパターンに対してテキストを検証し、divを表示すべきかを特定することができません。

<input id="test-1"> 
<div id="test-1-error"class="alert" style="display:none"> 
    This is an error! 
</div> 
<input id="test-2"> 
<div id="test-2-error" class="alert" style="display:none"> 
    This is an error! 
</div> 
<br> 
<input id="test-1"> 
<div id="test-1-error"class="alert" style="display:none"> 
    This is an error! 
</div> 
<input id="test-2"> 
<div id="test-2-error" class="alert" style="display:none"> 
    This is an error! 
</div> 
<br> 

私のjQuery

$('[id="test"]').each(function(i, val) { 
    $(val).attr("pattern", "(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d"); 
    }); 

    $('[id="test"]').focusout(function(i) { 
    console.log(i); 
    //Validate text in pattern 
    }); 

Answer 1

チェックこのスニペット

var regex = /^[0-9]*$/; 
 
    $(".test").keyup(function(i) { 
 
    console.log(i); 
 
    var $this = $(this); 
 
    if(!regex.test($this.val())){ 
 
    \t $this.next().show(); 
 
    }else{ 
 
    $this.next().hide(); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="test"> 
 
<div id="test-1-error"class="alert" style="display:none"> 
 
    This is an error! 
 
</div><br> 
 
<input class="test"> 
 
<div id="test-2-error" class="alert" style="display:none"> 
 
    This is an error! 
 
</div> 
 
<br> 
 
<input class="test"> 
 
<div id="test-1-error"class="alert" style="display:none"> 
 
    This is an error! 
 
</div><br> 
 
<input class="test"> 
 
<div id="test-2-error" class="alert" style="display:none"> 
 
    This is an error! 
 
</div> 
 
<br>