Validieren Sie Eingabefelder gegen ein Muster mit jquery und zeigen Sie div incase of error an

Question

Ich habe viele Textfelder, die in einem bestimmten Muster eingegeben werden müssen. Bei jquery load, ich füge ein Muster-Attribut zu jedem der Textfelder, mit denen ich mich befassen möchte. Was ich jetzt erreichen möchte, ist, wenn ich nach dem Eingeben eines Textfelds und dem Verlieren des Fokus das Muster testen möchte und ein div anzeigen möchte, das ein Fehlerfeld anzeigt, wenn es nicht mit dem Muster übereinstimmt. Ich bin nicht in der Lage zu identifizieren, wie ich den Text gegen das Muster validieren und das div zeigen sollte.

<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> 

Mein 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

Überprüfung dieser Ausschnitt

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>