Quote:
Originally Posted by Philip M
Terrific, but as I have often said, my customers insist on older browsers being supported. They are not interested in web sites that only work in IE9 or better.
I entered the date 47/89/3012 and it accepted it. 
Shome mishtake, shurely.
I'll stick with my Javaascript. |
i appreciated you taking the time to test it and provide feedback.
I've updated the example a bit, integrating your code, while addressing some of the low-hanging UX points raised by our friend.
It's like Captain Planet: "by our powers combined!!!".
I tried to go for a universal (no language) validation routine using your date checker and a upgraded alert routine. You can make it friendlier to natives by using english or french or whatever.
"Day is bad", "dia mal", "jour no bon" (i suck at frech), could provide richer UX at the cost of universality. this is an international starting point.
I think that the js provides a better UX than HTML5 alone. It not much work to integrate both. The default HTML5 error messages can be a bit vague, and it's probably gonna be another 6-12 months before we can default to <input type=date>, (falling-back of course).
I generic-azied your code to accept input fields instead of 3 numbers to reduce typing down the road, and to allow inputs to subscribe with one simple inline event handler.
You can re-use the inform() method instead of alert() on any form using HTML5 syntax, regardless of the native browser support for HTML5 features. The <input> tag is a great place to keep information about the input. Certainly easier to maintain/debug than if it were buried in a <script src> on a CDN'ified production server...
in conclusion, i think it's pretty cool how simple it is to homoginze the alert() and HTML5 validation, and the advantages of a hybrid approach should be self-evident:
tested in IE
7-10, FF, CH, OP:
Code:
<!DOCTYPE html><html>
<head>
<title>html5 form test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
[id]:valid, [id][valid]{ background:#cfc; }
[id]:invalid, [id][invalid] { background:#fcc; outline: 0; box-shadow: none; }
</style>
</head>
<body>
<h1>htm5 form validation test </h1>
<form onsubmit="return false;">
<label for="datedue">
<b>Date Due</b>
<input type="text" name="datedue" id="datedue" placeholder="12/31/2000" title="12/31/2000"
pattern="^[01]*\d{1}[.\/][0123]*\d{1}[.\/]\d{2,4}$" required autofocus onchange="checkValidDate(this)"
/>
</label>
<input type=submit value=test />
</form>
<script type = "text/javascript">
function inform(inp, message){
if(inp.setCustomValidity){
inp.setCustomValidity(message);
}else{
if(message){
alert(message+ "\n_________________\nex: " + inp.title);
inp.setAttribute("invalid", true);
inp.removeAttribute("valid");
}else{
inp.setAttribute("valid", true);
inp.removeAttribute("invalid");
}
}//end html5/legacy
}//end inform()
function checkValidDate(inp) {
var r=inp.value.split(/\W+/g),
yr= Number(( (r[2]>30?19:20) +''+ r[2] ).slice(-4)) , mmx=r[0], dd=r[1];
if (yr < 1910 || yr > new Date().getFullYear()) {
inform(inp, r.join(" / ") + "\n\n" + " >> "+yr+" <<" );
return false;
}
if (dd<1 || dd>31 || parseInt(dd)!=+dd ) {
inform(inp, r.join(" / ") + "\n\n" + " >> "+dd+" <<" );
return false;
}
mm = mmx - 1; // remember that in Javascript date objects the months are 0-11
var nd = new Date(yr, mm, dd);
var ndmm = nd.getMonth();
if (ndmm != mm) {
inform(inp, r.join(" / ") + "\n\n" + " >> "+mmx+" <<" );
return false;
} else {
inform(inp, "");
}
} /* end checkValidDate() */
</script>
</body>
</html>