?
Solved

Validate dates partially not working

Posted on 2006-05-09
25
Medium Priority
?
217 Views
Last Modified: 2006-11-18
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

0
Comment
Question by:xenoula
  • 13
  • 10
23 Comments
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638177
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.
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638179
xenoula,

In JavaScript that is.

Regards,

Richard.
0
 

Author Comment

by:xenoula
ID: 16638219
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.

 
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638283
In JS, convert the date from DD-MM-YYYY to YYYY-MM-DD and then use simple string comparison.

0
 

Author Comment

by:xenoula
ID: 16638328
Could you please provide an example of code?

Thanks,
Xenia
0
 

Author Comment

by:xenoula
ID: 16638413
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
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638425
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.
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638435
The subString() may be subStr(). I hardly use JS as you always have to do the work on the server anyway.
0
 

Author Comment

by:xenoula
ID: 16638535
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
0
 

Author Comment

by:xenoula
ID: 16638556
<form action="est.php" method="post" name="form1" id="form1" onsubmit="check(this);">
This is the event I have put in the form
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638588
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)


0
 

Author Comment

by:xenoula
ID: 16638718
When I select the 10th day it displays

2006 0/0 0/ 09:00:00

0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16638755
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);

0
 

Author Comment

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

gave me correct date
0
 

Author Comment

by:xenoula
ID: 16639257
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
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16639267
What about changing the offsets then?
0
 

Author Comment

by:xenoula
ID: 16639274
if I change again the offsets will not take the correct format
0
 

Author Comment

by:xenoula
ID: 16639752
What else you think?
0
 

Author Comment

by:xenoula
ID: 16640489
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();">
0
 

Author Comment

by:xenoula
ID: 16643337
Ok I find this part I put onsubmit="return check();"
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 16646213
Back again. Are you saying you got this working?
0
 

Author Comment

by:xenoula
ID: 16646956
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
0
 
LVL 40

Accepted Solution

by:
Richard Quadling earned 2000 total points
ID: 16646985
Before you go any further, take a look at http://www.mattkruse.com/javascript/date/source.html

Lots of functions here which you could use.

Especially the comparedates function.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month17 days, 2 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question