JSFiddle - React, Tailwind, and code Playground

HTML

<input id="firstname" onblur="validate('firstname')"></input>
<span id="firstnameError" class="err">Please enter your first name</span>
<span id="firstnameSuccess" class="suc">Thanks</span>
<br>
<input id="lastname" onblur="validate('lastname')"></input>
<span id="lastnameError" class="err">Please enter your last name</span>
<span id="lastnameSuccess" class="suc">Thanks</span>
<br>
<input id="email" onblur="validate('email')"></input>
<span id="emailError" class="err">Please enter your email</span>
<span id="emailSuccess" class="suc">Thanks</span>
<br>
    
    <select id="sel" onblur="validate('sel')" >
        <option value="">select a number</option>
        <option value="1" >1</option>
        <option value="2" >2</option>
    </select> 
<span id="selError" class="err">Please select a option</span>
<span id="selSuccess" class="suc">Thanks</span>
<br>

<button onclick="SimulateSubmit()">Click to submit</button>

CSS

.err, .suc {
    display: none;
}
.err { color: red;}
.suc { color: green;}

JavaScript

var validated = {};

function validate(field) {
    // Get the  value of the input field being submitted

    value = document.getElementById(field).value;

    // Set the error field tag in the html
    errorField = field + 'Error';

    // Set the success field
    successField = field + 'Success';

    if (value != '') {
        document.getElementById(successField).style.display = 'block';
        document.getElementById(errorField).style.display = 'none';
        validated[field] = true;
    } else {
        document.getElementById(successField).style.display = 'none';
        document.getElementById(errorField).style.display = 'block';
        validated[field] = false;
    }
}

function SimulateSubmit() {
    // Query your elements
    var inputs = document.getElementsByTagName('input');
    
    // Loop your elements
    for (i = 0, len = inputs.length; i < len; i++) {
        var name = inputs[i].id;
        
        if (!validated[name]) {
            // Call validate
            validate(name);
            // Prevent default
        }
    }
    
    
    var all_select = document.getElementsByTagName("select");
     for (i = 0, len = all_select.length; i < len; i++) {
        var name = all_select[i].id;
        
        if (!validated[name]) {
            // Call validate
            validate(name);
            // Prevent default
        }
    }
    
}