フォームで無効な日付を選択させない

日付を選択するボックスが年、月、日と分かれていた場合、
無効な日付を選択することができてしまいます。（2月31日など）

Javascriptを利用して選択できないようにする方法を紹介します。

今回は無効な日付を選択した場合は、選択したボックスを空にしています。
応用すればアラートを出す、またはエラーテキストを表示するなどができると思います。

処理の流れは選択した値を変数「y、m、d」に入れ、すべて選択されていたらDate()に選択値を入れる。
Date()で取得した日付をdsに入れ、年、月、日を取得する ※getFullYear()、getMonth()、getDate()
選択値とDate()で取得した値（ds）を比較して、一致していなければ選択したselectのvalueを空にする。
※4月31日は5月1日になって返ってくるので、存在しないことが判定できます。

function dateValidation( element, year, month, day ) {

    var y = document.getElementsByName( year )[0].value;
    var m = document.getElementsByName( month )[0].value;
   var d = document.getElementsByName( day )[0].value;

 if ( y && m && d ) {
        var ds = new Date( y, m-1, d );
     if ( ds.getFullYear() != y || ds.getMonth() != m-1 || ds.getDate() != d ) {
         return element.value = '';
        }
   }
}

onchangeでdateValidation( 選択した要素, 年のselect[name], 月のselect[name], 日のselect[name] )を処理させます。

<select name="year1" onchange="dateValidation(this, 'year1', 'month1', 'day1')">
<option value="">--年</option>
<option value="2014">2014年</option>
<option value="2015">2015年</option>
<option value="2016">2016年</option>
</select>
<select name="month1" onchange="dateValidation(this, 'year1', 'month1', 'day1')">
<option value="">--月</option>
<option value="1">1月</option>
    <!-- 省略 -->
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<select name="day1" onchange="dateValidation(this, 'year1', 'month1', 'day1')">
<option value="">--日</option>
<option value="1">1日</option>
<option value="2">2日</option>
<option value="3">3日</option>
   <!-- 省略 -->
<option value="29">29日</option>
<option value="30">30日</option>
<option value="31">31日</option>
</select>

今回のサンプル

http://tipsnote.github.io/date_validation/

リンク

[Date - JavaScript | MDN]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

[Date.prototype.getFullYear() - JavaScript | MDN]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

[Date.prototype.getMonth() - JavaScript | MDN]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth

[Date.prototype.getDay() - JavaScript | MDN]
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay