Trouble Implementing JavaScript to detect invalid dates

Question

<script type="text/javascript">
function validateForm() {
 if(document.date_selecting.mo.value == "Feb" && document.date_selecting.theDay.value == "31"){
 alert( "Date Invalid" );
 return false;
 }
 else if(document.date_selecting.mo.value == "Apr" && document.date_selecting.theDay.value == "31"){
 alert( "Date Invalid" );
 return false;
 // Leap Years 
 else if(document.date_selecting.year.value == "1980"){
 alert( "Invalid Year" );
 return false;
 }
 return true;
}
</script>
<?php 
$month = $_POST["mo"];
$day = $_POST["theDay"];
$yr = $_POST["year"];
if (!isset($_POST['submit'])) { // if page is not submitted; echo form
?>
<h2 style="margin:0; padding:0;">Date Selection</h2>
<FORM name="date_selecting" method="POST" onsubmit="return validateForm()" action="<?php echo $PHP_SELF;?>"> 
 <select name="mo" id="mo">
 <option disabled="disabled">SELECT MONTH</option>
 <option>January</option>
 <option value="Feb">February</option>
 <option>March</option>
 <option value="Apr">April</option>
 <option>May</option>
 <option>June</option>
 <option>July</option>
 <option>August</option>
 <option>September</option>
 <option>October</option>
 <option>November</option>
 <option>December</option>
 </select>
 <select name="theDay" id="theDay">
 <option disabled="disabled">SELECT DAY</option>
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 <option>6</option>
 <option>7</option>
 <option>8</option>
 <option>9</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 value="31">31</option>
 </select>
 <select name="year" id="year">
 <option disabled="disabled">SELECT YEAR</option>
 <option value="2012">2012</option>
 <option>2011</option>
 <option>2010</option>
 <option>2009</option>
 <option value="2008">2008</option>
 <option>2007</option>
 <option>2006</option>
 <option>2005</option>
 <option value="2004">2004</option>
 <option>2003</option>
 <option>2002</option>
 <option>2001</option>
 <option value="2000">2000</option>
 <option>1999</option>
 <option>1998</option>
 <option>1997</option>
 <option value="1996">1996</option>
 <option>1995</option>
 <option>1994</option>
 <option>1993</option>
 <option value="1992">1992</option>
 <option>1991</option>
 <option>1990</option>
 <option>1989</option>
 <option value="1988">1988</option>
 <option>1987</option>
 <option>1986</option>
 <option>1985</option>
 <option value="1984">1984</option>
 <option>1983</option>
 <option>1982</option>
 <option>1981</option>
 <option value="1980">1980</option>
 </select>
<INPUT TYPE="submit" value="Send" name="submit" />
</FORM>
<?
} else { 
echo "You chose: " . " ". $month . " ".$day . ", ". $yr;
}
?>

Was missing a bracket :) - Thanks again all!

• cHao: Won't selectedIndex give you a number? ie: not "February"?
• Šime Vidas: This is your fifth question concerning this same issue. I hope you get this to work one day. Good luck :)
• Pierre: I updated my answer after your question update.
• Ruan Mendes: Do not completely change a question. If you have a new question, please post it separately, or at the very least, leave the original question up, otherwise, responses don't make any sense. Updated code still not working. How is anybody supposed to know what you are trying to figure out? I'm reverting this to the original question, because if you update your code correctly. You should have added something at the bottom of the question explaining that you've followed the steps and it still doesn't work

Answer 1

You are confusing selectedIndex (which is the numerical index of the choice (starts from 0)) and the actual content of the option.

As Juan Mendes said, you can get the content using the value property:

if(document.date_selecting.mo.value == "February" && ...)

I recommend to use a value in your options to be lang-independent:

<option value="Feb">Febuary</option>

And then:

if(document.date_selecting.mo.value == "Feb" && ...)

...

ok you edited your question.

Now your problem is that the JavaScript is never called. (in fact its executed at the page load and thats all). If you want to validate your form using JS, you should consider using a function that returns false if there is an error:

<script type="text/javascript">
function validateForm() {
 if(document.date_selecting.mo.value == "Feb"){
 alert ( "Date Invalid" );
 return false;
 }
 return true;
}
</script>

And call it when the form is submitted:

<form ... onsubmit="return validateForm()">

• Ruan Mendes: A note to make it simpler, a select element has a value property so that selElement.options[selElement.selectedIndex].value always equals selElement.value, that saves lots of keystrokes.
• Pierre: @woopie onsubmit="return validateForm()" must be set in the <form ...> markup not in the <input type="submit" ...> one!
• Jshee: Wow, must be quite rusty on this stuff. Thanks a lot Pierre!

Answer 2

try this instead:

<script type="text/javascript">
var month = document.getElementById('mo').value;
var day = document.getElementById('tDay').value;
if(month == "Feb" && day == "31"){
 alert ( "Date Invalid" );
}
</script>

Answer 3

The simplest change to your code is to use .value everywhere you're using .selectedIndex. Like others have mentioned, selectedIndex is a number, the index into the options array. Also, please take note of Pierre's suggestion about using value in your <option>s