JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" id="test2" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" id="test" required />
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}
   
input:valid {
  background-color: #ddffdd;
}
   
input:required {
  border-color: #800000;
  border-width: 3px;
}

JavaScript

$(document).ready(function () {
    var inputs = $("input");
    inputs.each(function () {
        if ($(this).is(":invalid")) {
            console.log("Invalid: " + $(this).attr("id"));
        }
    });
});