jQuery.validateを使用して、3つのドロップダウンにすべてデフォルト以外のオプションが選択されていることを確認してください。

Question

jQuery.validate（）プラグインを使用して、ユーザーが3つのドロップダウンリスト彼らのDOB。私は何かを選ぶのと同じくらい、実際の日付を検証する必要はありません。私はちょうど1つの妥当性確認のエラーメッセージが "あなたの生年月日を提供してください"と表示されるようにします。

あなたはマークアップはどのように見えるかを想像することができますが、ここでは、とにかくです：

<div class="dropdown"> 
    <select id="day" class="styled" name="day"> 
    <option value="">--</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    [ etc... ] 
    </select> 
</div> 
<div class="dropdown"> 
    <select id="month" class="styled" name="month"> 
    <option value="">--</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    [ etc... ] 
    </select> 
</div> 
<div class="dropdown"> 
    <select id="year" class="styled" name="year"> 
    <option value="">--</option> 
    <option value="1993">1993</option> 
    <option value="1992">1992</option> 
    <option value="1991">1991</option> 
    <option value="1990">1990</option> 
    [ etc... ] 
    </select> 
</div> 

Answer 1

ない厳密にjQueryのですが、私は与えられた月の日数に合わせて、フォームのドロップダウンを設定するJavaScript関数を、やりました/年の組み合わせは、それがドロップダウンが記述

<select name="reg_day" id="reg_day"> 
    <option>Day</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<select name="reg_month" id="reg_month"> 
    <option>Month</option> 
    <option value="1">January</option> 
    <option value="2">February</option> 
    <option value="3">March</option> 
    <option value="4">April</option> 
</select> 
<select name="reg_year" id="reg_year"> 
    <option>Year</option> 
    <option value="2012">2012</option> 
    <option value="2011">2011</option> 
    <option value="2010">2010</option> 
    <option value="2009">2009</option> 
</select> 

関数としての最初のエントリを持つことを期待

function calculateDays(){ 
    //get the day, month, year drop downs 
    var dayBox = document.getElementById('reg_day'); 
    var monthBox = document.getElementById('reg_month'); 
    var yearBox = document.getElementById('reg_year'); 
    if(monthBox.value>0){ 
     if(yearBox.value<1800){ 
      var year = new Date().getFullYear(); 
     } else { 
      var year = yearBox.value; 
     } 
     var daysThisMonth = 32 - new Date(year, (monthBox.value-1), 32).getDate(); 
    } else { 
     var daysThisMonth = 31; 
    } 

    //save the first one, and the selected index 
    var dayBoxText = dayBox.options[0].text; 
    var dayBoxSelected = dayBox.selectedIndex; 

    //clear the drop down (days) 
    for(var count = dayBox.options.length - 1; count >= 0; count--){ 
      dayBox.options[count] = null; 
    } 

    //create the first option (ie the bit that says Day, Month, Year) 
    var theOption = new Option; 
    theOption.text = dayBoxText; 
    dayBox.options[dayBox.options.length] = theOption; 

    //populate the days drop down with the new lists 
    for(var i = 1; i <= daysThisMonth; i++) { 
     var theOption = new Option; 
     theOption.text = i; 
     theOption.value = i; 
     dayBox.options[dayBox.options.length] = theOption; 
    } 

    //if the day selected is less than days use choose the last, if not choose the selected index 
    if(dayBoxSelected<daysThisMonth){ 
     dayBox.selectedIndex = dayBoxSelected; 
    } else { 
     dayBox.selectedIndex = dayBox.options.length-1; 
    } 
} 

Answer 2

は選択では、「必要な」クラスを追加します。このfiddle

<select id="day" class="styled required" name="day"> 
    <option value="">--</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 

    </select> 

をチェックしてください。これは、あなたのjs

$('button').click(function() { 

    $('#myform').valid() 
    return false; 
}); 

Answer 3

生年月日の選択と、年と月の選択に基づいて動的に変更される日数の3つのドロップダウンを作成しました。 http://jsfiddle.net/ravitejagunda/FH4VB/10/。フィドルは、ドロップダウンの完全なコードを持っています

daysInMonth = new Date(year,month,1,-1).getDate();