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!

Won't selectedIndex give you a number? ie: not "February"? — cHao
– cHao, Commented Feb 2, 2011 at 2:31
This is your fifth question concerning this same issue. I hope you get this to work one day. Good luck :) — Šime Vidas
– Šime Vidas, Commented Feb 2, 2011 at 3:05
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 — Ruan Mendes
– Ruan Mendes, Commented Feb 2, 2011 at 3:50

Pierre · Accepted Answer · 2011-02-02 03:29:30Z

2

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()">

edited Feb 2, 2011 at 3:29

answered Feb 2, 2011 at 2:37

Pierre

1,34311 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruan Mendes Over a year ago

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 Over a year ago

@woopie onsubmit="return validateForm()" must be set in the <form ...> markup not in the <input type="submit" ...> one!

Jshee Over a year ago

Wow, must be quite rusty on this stuff. Thanks a lot Pierre!

Victor · Accepted Answer · 2011-02-02 03:18:11Z

0

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>

answered Feb 2, 2011 at 3:18

Victor

4,7311 gold badge28 silver badges31 bronze badges

Comments

Ruan Mendes · Accepted Answer · 2011-02-02 02:51:08Z

0

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

answered Feb 2, 2011 at 2:51

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Collectives™ on Stack Overflow

Trouble Implementing JavaScript to detect invalid dates

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related