JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />
    <input type="submit" />
</form>

JavaScript

/*$(function () {
    $("input[name=Password]").on("invalid", function () {
        this.setCustomValidity("Please enter at least 5 characters.");
    });
});*/
function attachHandler(el, evtname, fn) {
    if (el.addEventListener) {
        el.addEventListener(evtname, fn.bind(el), false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + evtname, fn.bind(el));
    }
}
attachHandler(window, "load", function(){
    var ele = document.querySelector("input[name=Password]");
     attachHandler(ele, "invalid", function () {alert('i');
        this.setCustomValidity("Please enter at least 5 characters.");
        this.setCustomValidity("");
    });
});