JSFiddle - React, Tailwind, and code Playground

HTML

<form>
     <h1>test</h1>

    <input id="myInput" type="text" name="foo" />
    <div id="myOutput1">...</div>
    <div id="myOutput2">...</div>
    <button type="submit">submit</button>
</form>

JavaScript

$('form').ready(function () {

    var form = jQuery('form'),
        input = jQuery('#myInput'),
        output1 = jQuery('#myOutput1'),
        output2 = jQuery('#myOutput2');

    form.off('submit');

    var callbacks = $.Callbacks("stopOnFalse");

    var fn2 = function fn2(event) {
        console.log(this);
        event.preventDefault();
        event.stopPropagation();
        console.log('1st submit called:', input.val().length);
        if (input.val().length === 0) {
            output1.html('Input needed!');
            output2.html("...")
            return false;
        }
    };

    var fn1 = function fn1(event) {
        // event.preventDefault();
        console.log('2nd submit called:', input.val().length);
        output2.html('success!');
    };

    callbacks.add(fn2, fn1);

    form.on('submit', function (event) {
        callbacks.fireWith(this, [event])
    });



});