asked on

Validate dates partially not working

Hi,

I have created a php page where the user selects a pick up date and drop off date from a pop up calendar
and submit the dates by clicking on the submit button. I have write a javascript function which checks
if the drop off date is after the pick up date.If it is not then an alert apperas informing the user for the error.

The code for the function:

<script type="text/javascript">
function check()
{
      var dt1 = Date.parse(document.form1.pickupdate.value+" "+document.form1.pickuphours.value+":00");
       var dt2 = Date.parse(document.form1.dropoffdate.value+" "+document.form1.dropoffhours.value+":00");
if(dt1>dt2)
{
alert("Please select a pick up date that is before the drop off date!");
return false;
       }
}
</script>

The code of the form:

<form action=".php" method="post" name="form1" id="form1" onsubmit="check(this);">
<input name="pickupdate" type="text" size="18" id ="pickupdate" value="pick up date" class="body"/>
<a href="javascript:showCal('Calendar3')"><img src="datebutton.jpg" alt="dates" border="0" /></a>

                              <select name="pickuphours" class="body">
                              <option selected value="pickuphour"> Pick up hour</option>
                              <option value="08:00">08:00</option>
                              <option value="09:00">09:00</option>
                              <option value="10:00">10:00</option>
                              <option value="11:00">11:00</option>
                              <option value="12:00">12:00</option>
                              <option value="13:00">13:00</option>
                              <option value="14:00">14:00</option>
                              <option value="15:00">15:00</option>
                              <option value="16:00">16:00</option>
                              <option value="17:00">17:00</option>
                              <option value="18:00">18:00</option>
                              <option value="19:00">19:00</option>
                              <option value="20:00">20:00</option>
</select>

<input name="dropoffdate" type="text" size="18" value="drop off date" class="body" id="dropoffdate" />
<input name="date" type="text" size="4" value="days" class="body" id="date" style="position:absolute; left: 28px; top: 355px;"/>
<a href="javascript:showCal('Calendar4')"><img src="datebutton.jpg" alt="dates" border="0" /></a>

<select name="dropoffhours" class="body" onfocus="calcDays()">
                               <option selected value="dropoffhour"> Drop off hour</option>
                               <option value="08:00">08:00</option>
                               <option value="09:00">09:00</option>
                               <option value="10:00">10:00</option>
                               <option value="11:00">11:00</option>
                               <option value="12:00">12:00</option>
                               <option value="13:00">13:00</option>
                               <option value="14:00">14:00</option>
                               <option value="15:00">15:00</option>
                               <option value="16:00">16:00</option>
                               <option value="17:00">17:00</option>
                               <option value="18:00">18:00</option>
                               <option value="19:00">19:00</option>
                               <option value="20:00">20:00</option>
</select>
<input name="submit" type="image" id="button" />
</form>

The function I have written is partially working and I will explain what the two problems are.
The first probllem is when the user select different month.
When the user select pick up date:10/05/2006 and drop off: 04/06/2006
an alert displays informing that the drop off date in not after the pick up date which noramlly should not have appeared.
Thus it is comparing the days(10>04) instead the whole date.

The second problem is that even the alert message appears teh form is been submited.

I would really appreciate your help.

Thank you,
Xenia

Richard Quadling

Hi xenoula,

I would get the format for the dates into YYYY-MM-DD and then you can use normal string comparison.

Regards,

Richard Quadling.

Richard Quadling

xenoula,

In JavaScript that is.

Regards,

Richard.

xenoula

ASKER

Actually I have to use the DD-MM-YYYY format because the whole algorithm I have created is based on the DD-MM-YYYY.
As it is the code I cannot make any changes that will amke it work?

"In JavaScript that is"- > what do you mean?

Thanks,
Xenia.

Richard Quadling

In JS, convert the date from DD-MM-YYYY to YYYY-MM-DD and then use simple string comparison.

xenoula

ASKER

Could you please provide an example of code?

Thanks,
Xenia

xenoula

ASKER

I tryied this code but it has error.

<script type="text/javascript">
function check()
{
     // var dt1 = Date.parse(document.form1.pickupdate.value+" "+document.form1.pickuphours.value+":00");
      var dtl= dateFormat.parse(document.form1.pickupdate.value+" "+document.form1.pickuphours.value+":00" , '!yyyy-!mm-!dd');
       //var dt2 = Date.parse(document.form1.dropoffdate.value+" "+document.form1.dropoffhours.value+":00");
var dt2 = dateFormat.parse(document.form1.dropoffdate.value+" "+document.form1.dropoffhours.value+":00" , '!yyyy-!mm-!dd');
       if(dt1>dt2)
{
alert("Please select a pick up date that is before the drop off date!");
return false;
       }
}
</script>

Can you help me please?

Thanks

Richard Quadling

Assuming your dates are output with leading zeros for the day and the month and the year to 4 digits.

Then something like ...

function check()
{
var s_dt1 = document.form1.pickupdate.value.subString(7,4) + ' ' + document.form1.pickupdate.value.subString(4,2) + ' ' + document.form1.pickupdate.value.subString(1,2) + ' ' + document.form1.pickuphours.value + ':00';
var s_dt2 = document.form1.dropoffdate.value.subString(7,4) + ' ' + document.form1.dropoffdate.value.subString(4,2) + ' ' + document.form1.dropoffdate.value.subString(1,2) + ' ' + document.form1.dropoffhours.value + ':00';
if (s_dt1 > s_dt2)
      {
      alert('Please select a pick up date that is before the drop off date!');
      return false;
      }
else
      {
      return true;
      }
}

Oh.

Just noticed, you are not returning true if the test is OK. Try that first.

Richard Quadling

The subString() may be subStr(). I hardly use JS as you always have to do the work on the server anyway.

xenoula

ASKER

Actually i used substr and it is working fine.
The only problem now is that when the user puts wrong details displays the alert but let the user submit the form.

How we can short it out this please?

Thanks

xenoula

ASKER

<form action="est.php" method="post" name="form1" id="form1" onsubmit="check(this);">
This is the event I have put in the form

Richard Quadling

No need to supply "this" in check() as check() looks directly at the form.

Just to test them...

Before the if in check(), can you add ...

alert('About to compare ' + s_dt1 + ' against ' + s_dt2);

and make sure that the values you are seeing are appropriate.

I MAY have the offsets 1 greater than they should be.

e.g.
document.form1.pickupdate.value.subString(7,4)

may need to be

document.form1.pickupdate.value.subString(6,4)

xenoula

ASKER

When I select the 10th day it displays

2006 0/0 0/ 09:00:00

Richard Quadling

31-12-2005
123456789

DD = (1,2)
MM = (4,2)
YYYY = (7,4)

OR

DD = (0,2)
MM = (3,2)
YYYY = (6,4)

Judging by the response you are getting I think you need to change the substring params to the second set.

Can you also add ...

alert('About to compare ' + document.form1.pickupdate.value + ' against ' + document.form1.dropoffdate.value);

xenoula

ASKER

When I used this alert:
alert('About to compare ' + document.form1.pickupdate.value + ' against ' + document.form1.dropoffdate.value);

gave me correct date

xenoula

ASKER

I used the
DD = (0,2)
MM = (3,2)
YYYY = (6,4)

is working but again does not stop submiting the form if there is error

Richard Quadling

What about changing the offsets then?

xenoula

ASKER

if I change again the offsets will not take the correct format

xenoula

ASKER

What else you think?

xenoula

ASKER

Do you think that the errror might be in the event of the form?

<form action="est.php" method="post" name="form1" id="form1" onsubmit="check();">

xenoula

ASKER

Ok I find this part I put onsubmit="return check();"

Richard Quadling

Back again. Are you saying you got this working?

xenoula

ASKER

Hi, I manage to find it.However,I would like to ask you a last question.How I can also check that the user does not put
a pick up date earlier than the current date?

Thanks,
Xenia

ASKER CERTIFIED SOLUTION

Richard Quadling

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial