JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="/echo/html/">
    <div id="error" style="display: none;">Bad date</div>
    <input id="first" type="text" value="next field should not be valid" /> 
    <input id="hello" type="text" name="hello" value="1.12.14" />
    <button type="submit">Submit</button>
</form>

JavaScript

$("#hello").datepicker({dateFormat: "dd.mm.yy" });

$("#first").focus();
var d = $('#hello');


$('form').submit(function(event){

    try{
        var format = d.datepicker( "option", "dateFormat" );
        var tmp_date = $.datepicker.parseDate(format, d.val());
        d.val( $.datepicker.formatDate(format, tmp_date) );
    }catch(e){
        event.preventDefault();
        $("body").append($('<div/>', {
    id: 123,
    class: 'foobar',
            html: 'Dateformat must be: ' + d.datepicker( "option", "dateFormat" )
}));
        $('#error').show();
        return false;
    }
    
    //Added to see data in the fiddle.  Do no use this bit!
    console.log($('form').serialize()); return false;
});