Используйте jQuery.validate, чтобы проверить, что во всех 3 раскрывающихся списках выбраны параметры не по умолчанию

Question

Я хочу использовать плагин jQuery.validate (), чтобы проверить, что пользователь выбрал опцию из 3 выпадающих списков - день, месяц и год для своей DOB.Мне не нужно проверять фактическую дату, пока они что-то выбирают.Я просто хочу, чтобы отображалось одно сообщение об ошибке проверки: «Пожалуйста, укажите свою дату рождения».

Вы можете представить, как выглядит разметка, но она все равно есть:

<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

Добавить «обязательный» класс в выбор. Проверьте это скрипка

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