Hi there,

I have a HTML Form which needs to be submitted to an order page so a user can order a personalized product. I have everything working except for the date validation for the form. I need to be able to check the Date of Birth they are entering is a valid date. That means I need to check for Leap Years so they can't enter 29th Feb on a non leap and I also need to check for the month so they cannot enter more than 30 for months where there is no 31.

I have the following piece of javascript:

Code JavaScript:
<script type="text/javascript"> 
 
var month = document.validateDate.month.value;
var day = document.validateDate.day.value;
var year = document.validateDate.year.value;
 
 
 
function validDate( month, day, year) 
{ 
   // Test for leap year 
    if ((year % 400 == 0) || (year % 4 == 0) &&                 
       !(year % 100 == 0)) 
          leap = true; 
    else 
          leap = false; 
 
    // Validate date                              // Assume a valid date-test otherwise
    if (year < 1900 || year > 2050)               // year must be four digits and      
        return false;                             //     within reasonable range 
    else if ((month < 1) || (month > 12) ||       // test general date and month range 
             (day < 1) || (day > 31)) 
        return false;      
    else if (((month == 4) || (month == 6) ||     // test 30 Day months 
              (month == 9) || (month == 11)) && (day == 31)) 
        return false;      
    else if (month == 2 && leap && day > 29)      // test February leap years 
        return false;          
    else if (month == 2 &&  !leap && day > 28)    // test February NON-leap years 
        return false;          
    else 
        return true;                              // otherwise, date is OK 
 
} 
</script>

Now I need to invoke it. And this is where the problem lies... I actually have 2 dates of birth to collect and I need to validate both of them when I submit the form.

This is the form:

Code HTML4Strict:
<form name="customize_report" action="/community/user/astro-cr-payment" method="post">
<div class="first-name-1">
<label class="first-name-1">Your First Name</label> <input type="text" id="first_name_1" name="first_name_1" size="20" style="margin-left:15px;" />
</div>
<div class="last-name-1">
<label class="last-name-1">Your Last Name</label> <input type="text" id="last_name_1" name="last_name_1" size="20" />
</div>
<br />
<div class="dob1">
<label class="dob1">Your Date of Birth</label>
<label style="margin-left:20px;">Day</label>
<select id="day1" name="day1">
	<option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option>	<option>06</option>
    <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option>
    <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option>
    <option>19</option> <option>20</option>	<option>21</option> <option>22</option> <option>23</option> <option>24</option>
    <option>25</option>	<option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option>
    <option>31</option> 
</select>
 
<label>Month</label>
<select id="month1" name="month1">
	<option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option>	<option>06</option>
    <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option>
</select>
 
<?php // Make the years array. 
$currentYear = date("Y");
$oldYear = $currentYear - '120';
$years = range ($currentYear, $oldYear);
 
// Make the years pull-down menu. 
echo '<label>Year: </label><select id="year1" name="year1">';
foreach ($years as $value) { 
echo "<option value=\"$value\">$value</option>\n"; 
} 
echo '</select>';
?>
 
</div>
<br /><br />
<div class="first-name-2">
<label class="first-name-2">Partner's First Name</label> <input type="text" id="first_name_2" name="first_name_2" size="20" style="margin-left:15px;" />
</div>
<div class="last-name-2">
<label class="last-name-2">Partner's Last Name</label> <input type="text" id="last_name_2" name="last_name_2" size="20" />
</div>
<br />
<div class="dob2">
<label class="dob2">Partner's Date of Birth</label>
<label style="margin-left:20px;">Day</label>
<select id="day2" name="day2">
	<option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option>	<option>06</option>
    <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option>
    <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option>
    <option>19</option> <option>20</option>	<option>21</option> <option>22</option> <option>23</option> <option>24</option>
    <option>25</option>	<option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option>
    <option>31</option> 
</select>
 
<label>Month</label>
<select id="month2" name="month2">
	<option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option>	<option>06</option>
    <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option>
</select>
 
<?php // Make the years array. 
$currentYear = date("Y");
$oldYear = $currentYear - '120';
$years = range ($currentYear, $oldYear);
 
// Make the years pull-down menu. 
echo '<label>Year: </label><select id="year2" name="year2">';
foreach ($years as $value) { 
echo "<option value=\"$value\">$value</option>\n"; 
} 
echo '</select>';
?>
 
</div>
<br /><br />
<input name="Submit"  type="submit" value="Proceed to Payment"/>
</form>

Please forgive the PHP - That is the easiest way of creating the "Years" for the dropdown. You can view the form live at http://togevi.com/community/user/astro-cr if you need to.

What I need to be able to do is check "day1, month1, year1" as one date and then "day2. month2, year2" as another date and if either one of them return invalid(false) I need to display an alert to tell them to correct it when the Submit button is pushed. I don't want the form to submit unless both dates are valid.

Can somebody please help me modify the above javascript and form to accommodate this requirement?

Thanks.