JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="validateForm()">VALIDATE!</button>
<br>
<input id="foo">
<br>
<input id="bar">
<br>
<input id="baz">
<br>
<input id="buz">

CSS

span {
    color: red;
}

JavaScript

var inputFieldBlankErrorMessage = "Blank is dank!";

function validateForm() {
    // Declare all the local variable
    var inputElements, inputId, inputType, i, inputLength, inputNode;

    inputElements = document.getElementsByTagName("input");

    for (i = 0, inputLength = inputElements.length; i < inputLength; i++) {
        inputId = inputElements[i].id;
        inputType = inputElements[i].type;

        if (inputType === "text") {
            inputNode = document.getElementById(inputId);
            if (inputNode.value === "") {
                var spanTag = document.createElement("span");
                spanTag.innerHTML = inputFieldBlankErrorMessage;
                inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);
            }
        }
    }
    return false; // Do Nothing

}