使用 jQuery.validate 检查 3 个下拉列表是否都选择了非默认选项

Question

我想使用 jQuery.validate() 插件来检查用户是否从 3 个下拉列表中选择了一个选项 - 其出生日期的日、月和年。我不需要验证实际日期，只要他们选择一些内容即可。我只想显示一条验证错误消息“请提供您的出生日期”。

您可以想象标记是什么样子，但无论如何它都是这样的：

<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

我为出生日期选择创建了三个下拉菜单，并且天数根据年份和月份选择动态变化。 http://jsfiddle.net/ravitejagunda/FH4VB/10/。 Fiddle 有下拉菜单的完整代码

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

Answer 2

严格来说不是 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 3

在选择中添加“必需”类。看看这个 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;
});