JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<form id="frm">

<h4>Default date with pattern valid date check: DD-MM-YYYY</h4>
<p>Also checks for februari 28/29, months 30/31 and 4 year leaps</p>

</p>

</h4><input 
type="text" 
pattern="(^(((0[1-9]|1[0-9]|2[0-8])[-](0[1-9]|1[012]))|((29|30|31)[-](0[13578]|1[02]))|((29|30)[-](0[4,6,9]|11)))[-](19|[2-9][0-9])\d\d$)|(^29[-]02[-](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)"
placeholder="dd-mm-jjjj" 
required
/>
<br>
<h4>Extended custom error msg</h4>

</h2>
<input 
type="text" 
pattern="(^(((0[1-9]|1[0-9]|2[0-8])[-](0[1-9]|1[012]))|((29|30|31)[-](0[13578]|1[02]))|((29|30)[-](0[4,6,9]|11)))[-](19|[2-9][0-9])\d\d$)|(^29[-]02[-](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)"
placeholder="dd-mm-jjjj" 
oninvalid="this.setCustomValidity('Datum niet correct.')" 
onchange="this.setCustomValidity('')"
onkeyup="setCustomValidity('')"
required
/>
<br><br>
<button type="submit">Check date</button>
</form>

JavaScript

$('#frm').on('submit',function(e){
alert("submitted");
return false;


});