JSFiddle - React, Tailwind, and code Playground

by Marcus Ekwall

HTML

<form>
<input type="text" id="Name" />
<button id="Confirm">Potrdi</button>
</form>
<div id="log">
</div>

JavaScript

$("input").focusout(function(){
    var ctx = $(this);
    $("#log").append("<div>focusout</div>");
    if (ctx.val() == "") {
        ctx.addClass("invalid");
        window.setTimeout(function() {
            $("#log").append("<div>focusing...</div>");
            ctx.focus();
        }, 1);
        return;
    }
    ctx.removeClass("invalid");
});

$("button").click(function(e) {
    e.preventDefault();
    if ($('form').find('.invalid').length) {
        return false;
    }
    $("#log").append("<div>" + this.nodeName + ", " + document.activeElement.nodeName +"</div>");
    if (this == document.activeElement)
    {
        $("#log").append("<div>click</div>");
    }
});