JSFiddle - React, Tailwind, and code Playground

by robnyman

HTML

<form id="the-form" action="#">
    
    <div>
        <h3>required, with setCustomValidity and oninvalid event</h3>
        <div><input type="text" id="custom-oninvalid-test" name="custom-oninvalid-test" required></div>
        
    </div>
    
    <p>
        <input type="submit" value="Send">
    </p>
    
</form>

JavaScript

var oninvalidTest = document.getElementById("custom-oninvalid-test");
oninvalidTest.addEventListener("input", function () {
    this.setCustomValidity("");
}, false);

oninvalidTest.addEventListener("invalid", function () {
    this.setCustomValidity("No, that's wrong!");
}, false);