14 Replies - 2656 Views - Last Post: 07 November 2011 - 05:07 PM

#1 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 08:32 PM

I came up with this but it's not working and I'm not exactly sure why. I suck at JS so any help would be appreciated.
<script type="text/javascript">
function date_check()
{
	var trans_date = document.form1.selectmonth.value + "-" + document.form1.selectday.value + "-" + document.form1.selectyear.value;
	var d = new Date();
	var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();
	if(new Date(trans_date) < new Date(today)){
		window.alert("The shipping date cannot be in the past, please enter a valid shipping date.");
		return false;

}
</script>
</head>
<body>
<form action="" method="post" name="form1" onsubmit="if (date_check()==false) return false; else return true;">
<label>Shipping Date</label>
<select name="selectmonth">
<option value="00">Jan</option>
<option value="01">Feb</option>
<option value="02">Mar</option>
<option value="03">Apr</option>
<option value="04">May</option>
<option value="05">Jun</option>
<option value="06">Jul</option>
<option value="07">Aug</option>
<option value="08">Sep</option>
<option value="09">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
<select name="selectday">
<option value="00">1</option>
<option value="01">2</option>
<option value="02">3</option>
<option value="03">4</option>
<option value="04">5</option>
<option value="05">6</option>
<option value="06">7</option>
<option value="07">8</option>
<option value="08">9</option>
<option value="09">10</option>
<option value="10">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="20">21</option>
<option value="21">22</option>
<option value="22">23</option>
<option value="23">24</option>
<option value="24">25</option>
<option value="25">26</option>
<option value="26">27</option>
<option value="27">28</option>
<option value="28">29</option>
<option value="29">30</option>
<option value="30">31</option>
</select>
<select name="selectyear">
<option value="0">2011</option>
<option value="1">2012</option>
<option value="2">2013</option>
<option value="3">2014</option>
<option value="4">2015</option>
</select>
<input type="submit" name="Submit" value="Submit" />
</form>


This post has been edited by doctusexemplo: 01 November 2011 - 08:36 PM


Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Data Validation - Disallow Past Dates

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 946
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

Re: JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 09:25 PM

The format of your date strings are incorrect. There aren't any hyphens in there. Have a look at this link: Javascript Date Object.
Was This Post Helpful? 0
  • +
  • -

#3 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 09:27 PM

<html>
<head>
<script type="text/javascript">
function date_check()
{alert("HERE");
	var trans_date = document.form1.selectmonth.value + "-" + document.form1.selectday.value + "-" + document.form1.selectyear.value;
	var d = new Date();
	var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();
	if(trans_date < today){
		alert("The shipping date cannot be in the past, please enter a valid shipping date.");
		return false;
		}
		else{
		alert("This is not true");
		}

}

</script>
</head>
<body>
<form action="" method="post" name="form1" onsubmit="if (date_check()==false) return false; else return true;">
<label>Shipping Date</label>
<select name="selectmonth">
<option value="00">Jan</option>
<option value="01">Feb</option>
<option value="02">Mar</option>
<option value="03">Apr</option>
<option value="04">May</option>
<option value="05">Jun</option>
<option value="06">Jul</option>
<option value="07">Aug</option>
<option value="08">Sep</option>
<option value="09">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
<select name="selectday">
<option value="00">1</option>
<option value="01">2</option>
<option value="02">3</option>
<option value="03">4</option>
<option value="04">5</option>
<option value="05">6</option>
<option value="06">7</option>
<option value="07">8</option>
<option value="08">9</option>
<option value="09">10</option>
<option value="10">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="20">21</option>
<option value="21">22</option>
<option value="22">23</option>
<option value="23">24</option>
<option value="24">25</option>
<option value="25">26</option>
<option value="26">27</option>
<option value="27">28</option>
<option value="28">29</option>
<option value="29">30</option>
<option value="30">31</option>
</select>
<select name="selectyear">
<option value="0">2011</option>
<option value="1">2012</option>
<option value="2">2013</option>
<option value="3">2014</option>
<option value="4">2015</option>
</select>
<input type="submit" name="Submit" value="Submit"></input>
</form>
</body>
</html>



FTFY,
1 - There was a missing brace
2 - No need to declare new dates
Was This Post Helpful? 0
  • +
  • -

#4 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

Re: JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 09:55 PM

@codeprada, I looked at what you provided but just apparently am not putting it together. Am I just needing to change my "-" to "," then? Because that didnt work.

@fromTheSparwal, Thanks for that. I made the changes, copied your code directly but it's still not throwing any alerts, at all.
Was This Post Helpful? 0
  • +
  • -

#5 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 10:05 PM

It worked for me, why not try pasting it on a new blank .html file? I noticed when I copied your code it was missing some of the tags(opening and ending) like html,body and head.
Was This Post Helpful? 0
  • +
  • -

#6 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

Re: JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 10:26 PM

Yea sorry, that was my fault. I'm trying to get this finished before I head to bed so was in a hurry lol.

I saved the source to what you provided as datecheck.html I opened it and left it set to Jan 1 2011. I got the alert HERE and the alert about the shipping date. I then changed it to Dec 1 2011 and again got the alert HERE and the alert shipping date. I closed and opened it again set it for Dec 1 2011 and again got the alert HERE and the alert shipping date. That was when I saved the code in your post above.

I don't know whats going on lol.
Was This Post Helpful? 0
  • +
  • -

#7 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 01 November 2011 - 10:59 PM

My bad, those were for debugging purposes. Here, this works.

<html>
<head>
<script type="text/javascript">
function date_check()
{
	var trans_date = document.form1.selectmonth.options[document.form1.selectmonth.selectedIndex].value + "-" + document.form1.selectday.options[document.form1.selectday.selectedIndex].value + "-" + document.form1.selectyear[document.form1.selectyear.selectedIndex].value;
	var d = new Date();
	var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();
	if(new Date(trans_date) < new Date(today)){
		alert("The shipping date cannot be in the past, please enter a valid shipping date.");
		return false;
		}
		

}

</script>
</head>
<body>
<form action="" method="post" name="form1" onsubmit="if (date_check()==false) return false; else return true;">
<label>Shipping Date</label>
<select name="selectmonth">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="selectday">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="selectyear">
<option value="11">2011</option>
<option value="12">2012</option>
<option value="13">2013</option>
<option value="14">2014</option>
<option value="15">2015</option>
</select>
<input type="submit" name="Submit" value="Submit"></input>
</form>
</body>
</html>


Why did it work?
1 - Notice I changed the values for your options in your body. Why? If I select January 1, 2011 on your original post that would result to "00-00-0" which can't be converted to date. So I fixed the values.
2 - I changed how you get the values from the select box for the DOM. I think yours work too, but well it's here so try out yours too. ^^
3 - You're right. Shipping date and the date today should be converted to date to be comparable. Anyway, with the formatting it uses now, it parses the dates.

There, good luck. ^^
Was This Post Helpful? 0
  • +
  • -

#8 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

Re: JavaScript Data Validation - Disallow Past Dates

Posted 02 November 2011 - 03:06 AM

Thanks for the effort. I again saved your code directly to a new html file, tried to run it and when testing don't get an alert. I'm going to play with it some more and then just say to hell with it lol.

If you have anymore thoughts they'd be appreciated. I've played around with, tried to just take it to the bare minimum and just return the value for the Month menu and it won't even give me that.
Was This Post Helpful? 0
  • +
  • -

#9 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 02 November 2011 - 07:18 PM

Whoa, it really won't work? I tested it on Chrome.
It works for me. Tested it again. What could be the problem... hmm.
Was This Post Helpful? 0
  • +
  • -

#10 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

Re: JavaScript Data Validation - Disallow Past Dates

Posted 02 November 2011 - 07:42 PM

I'm not sure. I played around with it some today and yesterday with the code I tried, yours and mine it wasnt even returning the month, date and year from the drop downs. So today I done this:
<script type="text/javascript">
functions check()
{
   var selecteddate = document.form1.selectmonth.value + "-" + document.form1.selectday.value + "-" + document.form1.selectyear.value;
   var d = new Date();
   var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();

   // I'd then make some alerts and it'd return the selected date and today with no problem
   alert(selecteddate);
   alert(today)
   //Now for the if statement is where it just stops working. I think maybe I'm doing
   //something wrong just solely in the if statement.
     if(new Date(selecteddate) < new Date(today))
       {
       alert("Past dates are not valid");
       return false;
       }
}
</script>



Now one thing I did differently to get this to work so far. instead of declaring my script in the <head></head> tags I moved it into the <body>. So can you see anything wrong in the if statement? Because it's for sure now getting the value of the dats but it just seems to not be comparing them.

This post has been edited by doctusexemplo: 02 November 2011 - 07:43 PM

Was This Post Helpful? 0
  • +
  • -

#11 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 02 November 2011 - 07:57 PM

<html>
<head>
<script type="text/javascript">
function check()
{
   var selecteddate = document.form1.selectmonth.value + "-" + document.form1.selectday.value + "-" + document.form1.selectyear.value;
   var d = new Date();
   var today = (d.getMonth()+1) + "-" + d.getDate() + "-" + d.getFullYear();

   // I'd then make some alerts and it'd return the selected date and today with no problem
   alert(selecteddate);
   alert(today)
   //Now for the if statement is where it just stops working. I think maybe I'm doing
   //something wrong just solely in the if statement.
     if(new Date(selecteddate) < new Date(today))
       {
       alert("Past dates are not valid");
       return false;
       }
}
</script>

</script>
</head>
<body>
<form action="" method="post" name="form1" onsubmit="if (check()==false) return false; else return true;">
<label>Shipping Date</label>
<select name="selectmonth">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="selectday">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="selectyear">
<option value="11">2011</option>
<option value="12">2012</option>
<option value="13">2013</option>
<option value="14">2014</option>
<option value="15">2015</option>
</select>
<input type="submit" name="Submit" value="Submit"></input>
</form>
</body>
</html>


There, I've put in your code with the one I posted earlier and replaced the js with yours. Other than function having an extra 's', yours work dude. Might be you're still using your old html body? I changed the values to accommodate real dates dude. ^^
Was This Post Helpful? 1
  • +
  • -

#12 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

Re: JavaScript Data Validation - Disallow Past Dates

Posted 02 November 2011 - 08:13 PM

No I was using the code you posted earlier. I just tested it again with the code you jsut posted. I get the selecteddate and today alerts but nothing else. I'm not understanding this.

EDIT: This is weird I've tried it in IE and FF. In FF I get the selecteddate and today messages but not the past date message. In IE I get all three but even if I select a future date.

This post has been edited by doctusexemplo: 02 November 2011 - 08:21 PM

Was This Post Helpful? 0
  • +
  • -

#13 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 02 November 2011 - 08:28 PM

Oh I see, this here dude is a classic case of cross-browser incompatibility, let me check what works and what doesn't on what server. I only used Chrome for my tests.
Was This Post Helpful? 0
  • +
  • -

#14 Sethro117  Icon User is offline

  • Still the sexiest mofo.
  • member icon

Reputation: 236
  • View blog
  • Posts: 2,378
  • Joined: 14-January 09

Re: JavaScript Data Validation - Disallow Past Dates

Posted 04 November 2011 - 01:39 PM

Quick update here, it's now fixed and working on Chrome, IE, FF as well as mobile browsers on iPhone, Android and Windows Mobile which were mainly the ones I'm targeting with this.
<script type="text/javascript">
function check()
{
   var selecteddate = document.form1.selectmonth.value + "/" + document.form1.selectday.value + "/" + document.form1.selectyear.value;
   var d = new Date();
   var today = (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear();
     if(selecteddate < today)
       {
       alert("Past dates are not valid");
       return false;
       }
}
</script>



What made it work:
1. I was told to change to original "-" in the dates to "/"
2. Instead of doing
if (new Date(selecteddate) < (new Date(today))

I just done
if (selecteddate < today)


Both of those I had tried individually with no change. When I done both however, it worked without a hitch. Thanks for all your help fromTheSprawl

This post has been edited by doctusexemplo: 04 November 2011 - 01:41 PM

Was This Post Helpful? 0
  • +
  • -

#15 fromTheSprawl  Icon User is offline

  • Monomania
  • member icon

Reputation: 513
  • View blog
  • Posts: 2,056
  • Joined: 28-December 10

Re: JavaScript Data Validation - Disallow Past Dates

Posted 07 November 2011 - 05:07 PM

No problem dude. Glad you made it work. ^^
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1