JSFiddle - React, Tailwind, and code Playground

HTML

<form method="yourpage.php">
<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 name="year" onblur="validte('year')" id="year">
    <option value="-1">Select Year</option>
    <option value="2015">2015</option>
    </select>
<span id="yearError" class="err">Please enter year</span>
<span id="yearSuccess" class="suc">Thanks</span>
<br>    
    <input type="submit" value="submit"><!--
<button onclick="SimulateSubmit()">Click to submit</button>-->
 </form>

CSS

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

JavaScript

var validated = {};
function validte(field){
    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 != "-1") {
        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 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
        }
    }
}