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

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>

duplicate question: http://stackoverflow.com/questions/1289086/jquery-validate-multiple-fields-with-one-error — Sander, Sep 22 '11 at 00:08

score 2 · Answer 1 · answered Jul 16 '14 at 20:26

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

score 1 · Accepted Answer · edited Oct 10 '12 at 19:47

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

score 1 · Answer 3 · answered Sep 22 '11 at 01:02

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

answered Sep 22 '11 at 01:02

Amin Eshaq

4,034
1
17
21

1

This is not the expected behaviour... he wants to validate the 3 selects as 1 control... with 1 error when invalid... Anyway, it's a duplicate question... better redirect to the right answer. – Sander Sep 22 '11 at 01:07

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

3 Answers3