JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

HTML

<form>
<input type="email" required>
<input type="password" required>
<input type="submit">
</form>

JavaScript

$('input').bind('invalid', function(e) {
    e.target.setCustomValidity("");
    if (!e.target.validity.valid) {
        console.log('found invalid');
        e.target.setCustomValidity("This field cannot be left blank");
    } else {
        console.log('found valid');
    }
}).bind('blur', function(e) { 
    if (!e.target.checkValidity()) { 
        console.log('doing custom error handling');
        $('input[type=submit]').click();
    } 
});