JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<form>
    <label for="whatever">Whatever</label>
    <input id="whatever" type="text" required />
</form>
<button>checkValidity</button>

JavaScript

$('input[type=text]').on('invalid', function() {
    //Just showing that this will be fired.  You probably want to do something fancier.
    alert(this.validationMessage);
});

$('button').on('click', function() {
    $('form')[0].checkValidity();
});
    
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('invalid', function(e) {
        e.preventDefault();
    }, true);
}