Date Validation...

[youradds]

Hi. I know its possible to do date validating via PHP/Perl, but I would rather do this with Javascript. Does anyone know how I could check the validity of a date field, in the format of;

03-02-2005

Basically, I need something like;

Submit button is blanked out, until a valid date is entered.

...or...

A text box appears, and stops the form being submitted if the date entered is not valid.

Anyone got any ideas?

TIA

Andy

 

[magiccity]

This function will edit dates in the format MM/DD/CCYY or MMDDCCYY and returns in the format MM/DD/CCYY. You need only pass the text field object and text field value. It will validate characters, months and number of days in a month. If the entry is invalid it returns focus to that field. If the field is left blank it allows the user to lose focus. Hope this helps.

function isDate (objname, DateField) {
var ValidDigits = "0123456789/";
var allNum = "";
var InvalidDigit = "";
var mmddccyy = DateField.replace(/ /gi,""
var month = mmddccyy.substring(0,2);
var day = mmddccyy.substring(3,5);
var year = mmddccyy.substring(6,10);
var today = new Date();
month = ((!month) ? today.getMonth():month-1);
var test = new Date(year,month,day);

for (i = 0; i < DateField.length; i++)
{
ch = DateField.charAt(i);
for (j = 0; j < ValidDigits.length; j++)
{
if (ch == ValidDigits.charAt(j))
{
break;
}
}
if (j == ValidDigits.length)
{
InvalidDigit = 'YES';
break;
}
}
if (trim(DateField).length == 8 && DateField / DateField == 1)
{
mmddccyy = DateField.substring(0,2);
mmddccyy += '/';
mmddccyy += DateField.substring(2,4);
mmddccyy += '/';
mmddccyy += DateField.substring(4,8);
mmddccyy = mmddccyy.replace(/ /gi,&quot;&quot;
month = mmddccyy.substring(0,2);
day = mmddccyy.substring(3,5);
year = mmddccyy.substring(6,10);
month = ((!month) ? today.getMonth():month-1);
var test = new Date(year,month,day);
}

if (trim(mmddccyy).length == 0)
{
return mmddccyy;
}
else
if (InvalidDigit == 'YES')
{
alert(&quot;Invalid Date : &quot; + DateField + &quot;\nPlease Enter Valid Date : Format MM/DD/CCYY&quot;
objname.focus();
return &quot;&quot;;
}
else
if (mmddccyy / mmddccyy == 1 || trim(year).length != 4)
{
alert(&quot;Invalid Date : &quot; + DateField + &quot;\nPlease Enter Valid Date : Format MM/DD/CCYY&quot;
objname.focus();
return &quot;&quot;;
}
else
if ( (month == test.getMonth()) && (day == test.getDate()) )
{
return mmddccyy;
}
else
{
alert(&quot;Invalid Date : &quot; + DateField + &quot;\nPlease Enter Valid Date : Format MM/DD/CCYY&quot;
objname.focus();
return &quot;&quot;;
}
}

 

[youradds]

Hi... thanks for this. How would I call this in the SUBMIT button/FORM codes?

Cheers

Andy

 

[SashiRaveendran]

<form name=Test>
<input type=Text name=&quot;Text1&quot; onblur=&quot;TestDate(this.value)&quot;>
<input type=Submit name=&quot;SubmitButton&quot;>
</form>
<SCRIPT LANGUAGE = &quot;JavaScript&quot;>
function TestDate(sDate)
{
var expression = /[0123]\d\-[01]\d\-\d{4}/;
document.Text1.SubmitButton.disabled = !expression.test(sDate);
}
</script>


This will make sure that the string passed in is in the format: dd-mm-yyyy

- It will make sure that the first month digit is either a 0 or a 1
- It will make sure that the first day digit is between 0 & 3

Note: It will not check to see if you have a valid date though, like:
09/38/2000 will pass.

on error goto hell

 

[SashiRaveendran]

<form name=Test>
<input type=Text name=&quot;Text1&quot; onblur=&quot;TestDate(this.value)&quot;>
<input type=Submit name=&quot;SubmitButton&quot;>
</form>
<SCRIPT LANGUAGE = &quot;JavaScript&quot;>
function TestDate(sDate)
{
var expression = /[0123]\d\-[01]\d\-\d{4}/;
document.Test.SubmitButton.disabled = !expression.test(sDate);
}
</script>


This will make sure that the string passed in is in the format: dd-mm-yyyy

- It will make sure that the first month digit is either a 0 or a 1
- It will make sure that the first day digit is between 0 & 3

Note: It will not check to see if you have a valid date though, like:
09/38/2000 will pass.

on error goto hell

 

[magiccity]

I would change the submit button to a standard button and use the onClick event to edit your date field...upon a valid date use document.formname.submit(). You would need to edit the script so it returns a string that indicates the field is valid.

For example:

<input type=&quot;button&quot; onClick=&quot;if (isDate(document.formname.fieldname, document.formname.fieldname.value) == 'valid'){document.formname.submit()}&quot; value=&quot;Submit&quot; name=&quot;CmdSubmit&quot;>

 

[youradds]

Here is the HTML I have at the moment...

<script LANGUAGE=&quot;JavaScript&quot;>
function TestDate(sDate)
{
var expression = /[0123]\d\-[01]\d\-\d{4}/;
document.Test.B1.disabled = !expression.test(sDate);
}
</script>
<table width=&quot;60%&quot; border=&quot;0&quot;>
<tr>
<td class=&quot;bodytext&quot; width=&quot;100%&quot;>
<a href=&quot;

http://www.askweddings.co.uk/a/index.php&quot;>Online

Planning Tools</a></b>
&gt; <b>Profile &gt; Edit Wedding Date </b>
<p style=&quot;line-height: 150%; margin-bottom: 10&quot;>Please amend your wedding date
via the form below;</p>
</td>
</tr>
</table>
<form method=&quot;GET&quot; action=&quot;index.php&quot; name=&quot;Test&quot; onSubmit=&quot;alert(testDateFormat(document.all.wedding_date.value))&quot;>
<table cellSpacing=&quot;1&quot; cellPadding=&quot;4&quot; width=&quot;60%&quot; border=&quot;0&quot;>
<tr>
<td class=&quot;bodytext&quot; bgColor=&quot;#eeeeee&quot; width=&quot;50%&quot;>Wedding Date: </td>
<td bgColor=&quot;#eeeeee&quot; width=&quot;50%&quot;>
<input type=&quot;text&quot; name=&quot;wedding_date&quot; size=&quot;20&quot; value=&quot;:::wedding_date:::&quot;></td>
</tr>
<tr>
<td width=&quot;100%&quot; colspan=&quot;2&quot;>&nbsp;</td>
</tr>
<tr>
<td width=&quot;100%&quot; colspan=&quot;2&quot;><center>
<input type=&quot;image&quot; value=&quot;Add&quot; name=&quot;B1&quot; border=&quot;0&quot; alt=&quot;Submit!&quot; src=&quot;

http://www.askweddings.co.uk/images/planning/submit.gif&quot;

width=&quot;95&quot; height=&quot;18&quot; hspace=&quot;5&quot;>
<a href=&quot;javascript:document.myForm.reset()&quot;>
<img src=&quot;

http://www.askweddings.co.uk/images/planning/clear.gif&quot;

border=&quot;0&quot; width=&quot;95&quot; height=&quot;18&quot;>
</a></center><input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;change_date_do&quot;>
</td>
</tr>
</table>
</form>

I've been playing with it (I'm no javascript expect, or come to think of it..I know bugger all about javascript) ....

Could you show me how I could make this code validate the link? I think the basic regex validation would be something like;

\d\d\-\d\d-\d\d\d\d

Cheers

Andy

 

[youradds]

Here is the HTML I have at the moment...

<script LANGUAGE=&quot;JavaScript&quot;>
function TestDate(sDate)
{
var expression = /[0123]\d\-[01]\d\-\d{4}/;
document.Test.B1.disabled = !expression.test(sDate);
}
</script>
<table width=&quot;60%&quot; border=&quot;0&quot;>
<tr>
<td class=&quot;bodytext&quot; width=&quot;100%&quot;>
<a href=&quot;index.php&quot;>Online Planning Tools</a></b>
&gt; <b>Profile &gt; Edit Wedding Date </b>
<p style=&quot;line-height: 150%; margin-bottom: 10&quot;>Please amend your wedding date
via the form below;</p>
</td>
</tr>
</table>
<form method=&quot;GET&quot; action=&quot;index.php&quot; name=&quot;Test&quot; onSubmit=&quot;alert(testDateFormat(document.all.wedding_date.value))&quot;>
<table cellSpacing=&quot;1&quot; cellPadding=&quot;4&quot; width=&quot;60%&quot; border=&quot;0&quot;>
<tr>
<td class=&quot;bodytext&quot; bgColor=&quot;#eeeeee&quot; width=&quot;50%&quot;>Wedding Date: </td>
<td bgColor=&quot;#eeeeee&quot; width=&quot;50%&quot;>
<input type=&quot;text&quot; name=&quot;wedding_date&quot; size=&quot;20&quot; value=&quot;:::wedding_date:::&quot;></td>
</tr>
<tr>
<td width=&quot;100%&quot; colspan=&quot;2&quot;>&nbsp;</td>
</tr>
<tr>
<td width=&quot;100%&quot; colspan=&quot;2&quot;><center>
<input type=&quot;image&quot; value=&quot;Add&quot; name=&quot;B1&quot; border=&quot;0&quot; alt=&quot;Submit!&quot; src=&quot;images/planning/submit.gif&quot; width=&quot;95&quot; height=&quot;18&quot; hspace=&quot;5&quot;>
<a href=&quot;javascript:document.myForm.reset()&quot;>
<img src=&quot;images/planning/clear.gif&quot; border=&quot;0&quot; width=&quot;95&quot; height=&quot;18&quot;>
</a></center><input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;change_date_do&quot;>
</td>
</tr>
</table>
</form>

I've been playing with it (I'm no javascript expect, or come to think of it..I know bugger all about javascript) ....

Could you show me how I could make this code validate the link? I think the basic regex validation would be something like;

\d\d\-\d\d-\d\d\d\d

Cheers

Andy

 

[mwolf00]

basic regEx could be like this...

function checkDate(){
dateVal = document.dateForm.dateField.value
ptrn = /^\d{2}-\d{2}-\d{4}$/
//or this one
ptrn = /^(01|02|03|04|05|06|07|08|09|10|11|12)-(01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31)-(2001|2002|2003|2004|2005|2006)$/
if (ptrn.test(dateVal)){
alert(&quot;valid&quot
}
else{
alert (&quot;not valid&quot
}
}





Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 

[kaht]

I dunno if you got your code working yet or not, but I think this is probably the easiest solution if you are still trying to get it to work:

function checkForDate(strPassed) {
var newDate = new Date();
newDate.setTime(Date.parse(strPassed));
if (isNaN(parseFloat(newDate.getFullYear()))) {
return (false);
}
return (true);
}

Changing your string to a date object via the Date.parse method is the easiest way I've found to do it. The Date.parse method is pretty smart considering it parses dates in the form: January 1, 2004 - Jan 1, 2004 - 1/1/2004 - 1/1/04 - Jan/1/04 - 2004/1/1 - etc.

I think you get the idea, it's a really smart method and allows for the user to type it in however they want. The function I wrote checks to see if the parser finds a valid year, if not it returns isNaN, which means the date typed in is invalid, at which point you could use an alert box to say &quot;enter the date in the form month/day/year&quot; to be completely idiot safe.

By the way, there are a lot of methods for the date object that might help you out more with your application, they should be in any standard javascript book or easily found on the web.

-kaht

 

[slatet]

How would you pass in button descriptions for this? If I want more than just an 'OK' button?