Question

I want to use the jQuery.validate() plugin to check that the user has chosen an option from 3 dropdown lists – day, month and year for their DOB. I don’t need to validate the actual date, just as long as they choose something. I just want the one validation error message to be displayed to read “Please provide your date of birth”.

You can imagine what the markup looks like, but here it is anyway:

<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

Not strictly JQuery, but i did a function in JavaScript, which configures the form drop downs to suit the number of days for a given month/year combination, it expects the drop downs to have the first entry as a description

<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> 

The Function

    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;
    }
}