Use jQuery.validate to check that 3 dropdowns all have non-default options selected

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 lik开发者_如何学Goe, 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>

---

I created three dropdowns for Date of Birth selection and number of days changes dynamically based on the year and month selection. http://jsfiddle.net/ravitejagunda/FH4VB/10/. Fiddle has the complete code for the dropdowns

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

---

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

---

Add a "required" class in the selects. Check out this 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>

This is your js

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

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