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');

form.on('submit', function (event) {
    output2.html('success!');
    event.preventDefault();
});

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


});