JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<form id='1'>
    <div class='inputs'>
        <input type='text' class='' req='true' placeholder='Name...'></input>
        <span class='error_msg'>You must type this one bitch</span>
    </div>
    
    <div class='inputs'>
        <input type='text' class='' req='false' placeholder='Place...'></input>
        <span class='error_msg'></span>
    </div>
    
    
    <div class='inputs'>
        <input type='text' class='' req='true' req_type='num' placeholder='num..'></input>
        <span class='error_msg'>Field Required!!!</span>
    </div>
    
    <button class='submitbutton'>GO</button>     
</form>

<hr />

<form id='2'>
    <div class='inputs'>
        <input type='text' class='' req='true' placeholder='Name2...'></input>
        <span class='error_msg'>You must type this one bitch2</span>
    </div>
    
    <div class='inputs'>
        <input type='text' class='' req='false' placeholder='Place2...'></input>
        <span class='error_msg'></span>
    </div>
    
    <button class='submitbutton'>GO</button>     
</form>

CSS

span.error_msg {
    font-size: 12px;
    padding: 3px;
    background-color: pink;
    color: blue;
}

JavaScript

$(function(){
    $('.error_msg').hide();
    
    $('.submitbutton').click(function(e){
        e.preventDefault();
              formID = $(this).parent().attr('id');
              
              validate(formID);
    });
});

    function validate(formID) {
       $('form#'+formID).children('div').each( function() {
           //alert($(this).children('span.error_msg').text());
           if ($(this).children('input').attr('req') == 'true'){
               val = $(this).children('input').val();
               if (val.length == 0) {
                   $(this).children('span.error_msg').show();
               }
               if (val.length > 0) {
                   $(this).children('span.error_msg').hide();
               }
               if ($(this).children('input').attr('req_type') == 'num'){
                   if (isNaN(parseFloat(val))) {
                        $(this).children('input').val('');
                        $(this).children('span.error_msg').show();
                   }
                   if (!isNaN(parseFloat(val))) {
                       $(this).children('span.error_msg').hide();
                   }
               }
           }
        });

    }