JSFiddle - React, Tailwind, and code Playground

HTML

<p>Focu an input to see if it's valid !</p>

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

CSS

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

JavaScript

jQuery.extend(jQuery.expr[':'], {
    invalid : function(elem, index, match){
        var invalids = document.querySelectorAll(':invalid'),
            result = false,
            len = invalids.length;
        
        if (len) {
            for (var i=0; i<len; i++) {
                if (elem === invalids[i]) {
                    result = true;
                    break;
                }
            }
        }
        return result;
    }
});


$('input').on('focus', function() {
    var invalid = $(this).is(':invalid');
    
    if (invalid) {
        $('#result').html('This is <b>NOT</b> valid')
    }else{
        $('#result').html('This is valid')
    }
});