JSFiddle - React, Tailwind, and code Playground

by ahallicks

HTML

<div id="toggle">
    
    <p>
    <input type="text" name="blah" class="required" data-errormessage="Add some blah" />
    </p>
    <p>
    <input type="text" name="blah" class="required" data-errormessage="Add some blah" />
    </p>
    <p>
    <input type="text" name="blah" class="required" data-errormessage="Add some blah" />
    </p>
    
</div>

CSS

input {
    display: block;
}

JavaScript

function clientErrMsgs() {
        var container = document.getElementById("toggle");
        var inputArray = container.getElementsByTagName("input");
        for (var i = 0; i < inputArray.length; i++) {
        alert("");
            if (inputArray[i].getAttribute("class") == "required" && inputArray[i].value == "") {
                var errmsg = inputArray[i].getAttribute("data-errormessage");
                var labelErr = document.createElement('label');
                labelErr.id = "ErrMsg" + i;
                labelErr.innerHTML = errmsg;
                var parentEl = inputArray[i].parentNode;
                parentEl.appendChild(labelErr);
                }
            }
        }

$(function()
  {
     
     clientErrMsgs(); 
      
  });