JSFiddle - React, Tailwind, and code Playground

by interdream

HTML

<form action="" id="myForm">
    Required field: <input type="text" class="required" /><br />
    Required field 2: <input type="text" class="required" />
    <input type="submit" value="Go" />
</form>

CSS

.bad { background-color:#ff0000 }

JavaScript

window.onload = function() {
    document.getElementById("myForm").onsubmit = function() {
      var fields = this.getElementsByClassName("required"),
          sendForm = true;
      for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
          fields[i].style.backgroundColor = "#ff0000";
          sendForm = false;
        }
        else {
          fields[i].style.backgroundColor = "#fff";      
        }
      }
      if(!sendForm) {
        return false;
      }
    }
}