JSFiddle - React, Tailwind, and code Playground

by Bernardo Alfonso Borunda Jaquez

HTML

<div id="groupContainer">
    <div id ="profileGroup1">
        <div class="item">
            Number1: <input type="text" id="number_1" value="20" class="txtNumber">
        </div>
        <div class="item">
           Date1: <input type="text" id="date_1" value="1234" class="txtDate">
        </div>
    </div>
    <div id ="profileGroup2">
        <div class="item">
            Number2: <input type="text" id="number_2" value="" class="txtNumber">
        </div>
        <div class="item">
            Date2: <input type="text" id="date_2" value="01/01/2015" class="txtDate">
        </div>
    </div>
            
    <button id="btnSubmit">Submit</button>
</div>

JavaScript

$(document).ready(function(){
	$(document).on('keyup','.txtNumber', function() {
        var regExpAllow = new RegExp('[^0-9.]', 'g');
        $(this).val($(this).val().replace(regExpAllow,''));
    });
    
    $(document).on('keyup','.txtDate', function() {
        var regExpAllow = new RegExp('[^0-9/]', 'g');
        $(this).val($(this).val().replace(regExpAllow,''));
    });
    
    $(document).on('click','#btnSubmit', function() {
		var regExpMatch = new RegExp('^[0-3][0-9]/[0-1][0-9]/[1-2][0-9]{3}$');
        $('.txtDate').each(function() {
            if ($(this).val().match(regExpMatch) != null) {
                alert('Valid Date:'+$(this).val());
            } else {
                alert('Invalid Date:'+$(this).val());
            }
        });
        
        regExpMatch = new RegExp('^[0-9].[0-9]{3}$');
        $('.txtNumber').each(function() {
            if ($(this).val().match(regExpMatch) != null) {
                alert('Valid Number:'+$(this).val());
            } else {
                alert('Invalid Number:'+$(this).val());
            }
        });       
    });
});