JSFiddle - React, Tailwind, and code Playground

by Academia

HTML

<form>
    <div>
        <label for="date">Date *:</label>
        <input id="date" name="date" type="date" title="Enter the date in dd/mm/yyyy format" placeholder="Insert a valid date" pattern="([0-2]\d|3[0-1])\/(0\d|1[0-2])\/(19|20)\d{2}" onblur="checkPattern(this)" required />
    </div>
    <br/>
    <div>
        <label for="time">Time *:</label>
        <input id="time" name="time" type="time" title="Insert a valid time in hh:mm:ss 24h format" placeholder="Insert a valid time" pattern="([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d" onblur="checkPattern(this)" required />
    </div>
    <br/>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

JavaScript

function checkPattern(obj){
    var re = new RegExp("^"+obj.pattern+"$");
        if (!re.test(obj.value)) {
            obj.focus();
            alert("Wrong format. Please, "+obj.title);
        }
}