JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="usr_name" class="validate" name="usr_name" placeholder="User Name"/>
<input type="text" id="fst_name" class="validate" name="fst_name" placeholder="First Name"/>
<input type="text" id="lst_name" class="validate" name="lst_name" placeholder="Last Name"/>
<input type="text" id="mdl_name" class="validate" name="mdl_name" placeholder="Middle Name"/>
<button onclick="validate(1140379545)">Submit</button>

CSS

.err{
    border:1px solid red;
    color:red;
}
.onfcs{
    border:0px solid red;
    color:black;
}

JavaScript

function validate(){    
    
    // get all the inputs that have the validate class in it
    // this requires the input to have a class name valled validate
   var validateElements = document.getElementsByClassName("validate");
    
    
    // Get all the inputs 
    // This code is required because the output from 'document.getElementsByClassName' is not fit to the current needs
    // console.log("validateElements",validateElements); // Uncomment this line if you want to see what i mean
    var inputs = Array.prototype.filter.call(validateElements,         function(element){
        return element.nodeName === 'INPUT';
    });
    
    // Loop through the inputs to be validated
    
    for(var i=0; i < inputs.length; i ++ ){
        var input = inputs[i];
        if(input.value.length == 0){
            // generic placeholder
            input.placeholder = "kindly enter value";
            // error class 
            input.classList.add("err");
            // focus on the input [ optional ]
            input.focus();
            // break the loop [ optional ]
            break;
        }
    }
    
}