CodingForums.com - View Single Post - Validating Date with JS using Reg Expression

Old Pedant · 12-08-2012, 10:03 PM

Hey, no fair! That page has *BOTH* the HTML 5 specification *AND* uses JS validation!

What's the point? If you have the JS validation there, you don't need the HTML 5 validation, do you?

Let's strip it back to *JUST* the HTML 5 validation:

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
		/>
	</label>
</form>

</body>
</html>

And now, indeed, it accepts 13/32/8888 and the field turns a pretty green.

BUT...

But isn't that the fault of the regular expression?!!??

Even a *SMALL* fix to it helps a lot:

Code:

    pattern="^(0?[1-9|1[012])[.\/](0?[1-9]|[12]\d|3[01])[.\/](19|20)\d\d$"

That will still allow "2/29/2011" and "4/31/1926", but it's a huge improvement.

Give me time and I'll create a regular expression that will only allow correct dates in, say, 1901 through 2099.

12-08-2012, 10:03 PM	PM User \| #18
Old Pedant Supreme Master coder! Join Date: Feb 2009 Posts: 23,187 Thanks: 59 Thanked 3,995 Times in 3,964 Posts	Hey, no fair! That page has BOTH the HTML 5 specification AND uses JS validation! What's the point? If you have the JS validation there, you don't need the HTML 5 validation, do you? Let's strip it back to JUST the HTML 5 validation: 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 /> </label> </form> </body> </html> And now, indeed, it accepts 13/32/8888 and the field turns a pretty green. BUT... But isn't that the fault of the regular expression?!!?? Even a SMALL fix to it helps a lot: Code: pattern="^(0?[1-9\|1[012])[.\/](0?[1-9]\|[12]\d\|3[01])[.\/](19\|20)\d\d$" That will still allow "2/29/2011" and "4/31/1926", but it's a huge improvement. Give me time and I'll create a regular expression that will only allow correct dates in, say, 1901 through 2099. __________________ An optimist sees the glass as half full. A pessimist sees the glass as half empty. A realist drinks it no matter how much there is.