date format field validation

[tonynoriega]

in my registration form, i have a date field that my users enter as the "Lead Contact Date" in "2007-12-11" format so that it can calculate dates with another function that i have...

it seems my users are used to entering dates in a different format...

how can i validate this field so that if they enter the wrong date format, it gives them an alert to fix it...

or better yet, is there a way to see the format they entered, and automatically fix it for them? (i know thats asking alot)

thanks all..

[Dabrowski]

This seems pretty simple with a 1 line regex! Let me know what format they're entering and I'll do you an example.

[tonynoriega]

well what i want them to submit is yyyy-mm-dd

and they are entering all kinds of stuff from:

mm-dd-yy, mm/dd/yyyy, mm-dd-yyyy

[Dabrowski]

ok then, the key here is they're using mdy format, so we can build on that. I'm going to assume you know something about coding, so I've just done a quick example.....

The HTML.....

<input name='date' type='text'> 
<input name='realdate' type='hidden'>

ok, we've got a text field for the date, and a hidden field for the changed around version.

The script......

var userdate = document.form.date.value; 
var mydate = userdate.replace( /(\d+)\D(\d+)\D(\d+)/, "$3-$1-$2"); 
alert( mydate); 
document.form.realdate.value = mydate;

Basically, the regular expression matches:
Some numbers: \d+
A single non-number character: \D
Some numbers: \d+
A single non-number character: \D
Some numbers: \d+

By putting the \d+'s in ()'s, we capture their matches into $1, $2 and $3 in the order they appear. Then in the replacement string we simply swap them around with the hyphen in the middle.

You should note though, that if the user enteres nonsense, this won't fail, or produce an error. If no mm, dd, or yyyy is matched, the realdate field will simply contain "--", but I guess you already have incorrect date code somewhere.

[tonynoriega]

thanks...

i understand how that works, i think...but can i ask..

if "date" is retaining the entry that the user put, isnt that still getting submitted to the dbase table in the invalid format?

[Dabrowski]

Depends what your backend does with the input fields. In this case you'd have to change it to look at the 'realdate' field. I just did it that way to preserve the user's text.

Here's a shorter version that will replace the text, but beware, if the user realises you're changing it round, he may decide to be helpful and put it in how you want it. Then the script will muddle it up and you'll get the wrong format again. That's why it's better to use a hidden field.

Here's the shorter way......

var userdate = document.form.date.value;  
var mydate = userdate.replace( /(\d+)\D(\d+)\D(\d+)/, "$3-$1-$2");  
document.form.date.value = mydate;

See, we're putting the value back into the date field instead. If you really wanted to you could condense this into 1 line, but I like to break it down so it's more readable.

[rocknbil]

Why don't you just use drop down lists for date, month, and year? I find that any time I open the door for user error someone will find it.

[Fotiman]

Better yet, use a calendar control (aka date picker).

[tonynoriega]

fotiman...

believe it or not, i have a calendar date picker...

a javascript calendar that "pops up" with a calendar, you select the date and it automatically populates the field for you...

still doesnt seem to work....

i just cant train these people enough...

[Fotiman]

If you have a date picker, then make the input field readonly so that they can only enter valid dates via the calendar.

[Dabrowski]

Or even better, make it hidden!