如何验证表单字段集是否已选中所有（如果有的话）选择框？

Question

I'm editing an HTML form for my employer that has a Date of Birth fieldset with three select boxes: "Day", "Month", "Year". The date of birth is not required to submit the form. However, they need me to create a form validation that makes it so a user cannot select options in just one or two out of the three select boxes. In other words, if anything in the Date of Birth fieldset is selected, they must all be selected for the form to validate. And if a user tries to select, say, just the Day and not the Month or Year, they want all three of the select boxes to change to a red border and different color background on submit, and for the submit button to be disabled until all selections are made or cleared. They also want an error message to display under the select boxes, but the javascript was already there to make that function properly.

I'm still pretty new to javascript and haven't been able to find the solution anywhere online or on this site. I saw other examples of form validators, but none that seemed to be do what I'm looking to do.

Here's a shortened version of the HTML code I'm working with that came from the development team:

<div class="control-group">
<fieldset>
    <legend id="dateofbirth">Date of Birth:</legend>
    <div class="controls">
        <div class="hide"><label tabindex="0" id="dd">Select your two-digit day of birth.</label></div>
        <select id="dob-dd-select" name="BIQ_DOB_DAY" class="dd" aria-required="true">
            <option id="dob-day-0" role="option" aria-selected="true" value="">Day</option>
            <option id="dob-day-1" role="option" aria-selected="false" value="1">1</option>
            <option id="dob-day-2" role="option" aria-selected="false" value="2">2</option>
        </select>

        <div class="hide"><label id="mm">Select your month of birth.</label></div>
        <select class="mm" id="dob-month-select" name="BIQ_DOB_MONTH" tabindex="0" aria-required="true">
            <option id="dob-month-0" role="option" aria-selected="true" value="">Month</option>
            <option id="dob-month-1" role="option" aria-selected="false" value="1">1. January</option>
            <option id="dob-month-2" role="option" aria-selected="false" value="2">2. February</option>
        </select>

        <div class="hide"><label tabindex="0" id="yyyy">Select your four-digit birth year.</label></div>
            <select class="yyyy" id="dob-yyyy-select" name="BIQ_DOB_YEAR" tabindex="0" aria-required="true">
                <option id="yyyy0" role="option" aria-selected="true" value="">Year</option>
                <option id="dob-year-1" role="option" aria-selected="false" value="1900">1900</option>
                <option id="dob-year-2" role="option" aria-selected="false" value="1901">1900</option>
            </select>
    </div><!--/controls-->
</fieldset>
</div><!--/control-group-->

<div>
<button tabindex="0" onclick="validateDateOfBirthDropDownOnSubmit();" type="button" id="btn-biq-submit">Continue</button>
</div><!-- /submit button -->

Thanks in advance for any pointers you can give me.

*I attempted both of the answers provided, but didn't get it to work. So I edited my question to add the javascript I'm working with. Not sure where to add the css style changes. Everything else (error message and disabled submit button) are working properly:

var validateDateOfBirthDropDown = function() {
            console.log("validateDateOfBirthDropDown start");
            var allPopulated = false;
            var allValid = false;
            var onePopulated = false;
            var txtMonthPopulated = false;
            var txtDatePopulated  = false;
            var txtYearPopulated  = false;
            //console.log(" biq_dob_day val " + $('#dob-month-select').val());
            txtMonthPopulated = checkSelectPopulated($('#dob-month-select').val());
            //console.log(" biq_dob_month val " + $('#dob-dd-select').val());
            txtDatePopulated = checkSelectPopulated($('#dob-dd-select').val());
            //console.log(" biq_dob_year val " + $('#dob-yyyy-select').val());
            txtYearPopulated = checkSelectPopulated($('#dob-yyyy-select').val());
            console.log(" txtMonthPopulated val " + txtMonthPopulated + ", txtDatePopulated "+txtDatePopulated+", txtYearPopulated " +txtYearPopulated);
            if(txtMonthPopulated && txtDatePopulated && txtYearPopulated){
                    console.log("all populated");
                    allPopulated = true;
            }
            if(txtMonthPopulated || txtDatePopulated || txtYearPopulated){
                    console.log("atleast one populated");
                    onePopulated = true;
            }
            if(!txtMonthPopulated && !txtDatePopulated && !txtYearPopulated){
                    console.log("all not populated");
                    allPopulated = false;
            }
            if(allPopulated){
                    console.log("all populated");
                    //hideDateOfBirthError();
                    return true;
            }
            if(onePopulated && !allPopulated){
                    //partial error
                    console.log("partial - onePopulated && !allPopulated");
                    //showDateOfBirthError();
                    return false;
            }
            if(!allPopulated){
                    console.log("!allPopulated");
                    //hideDateOfBirthError();
                    return true;
            }
            console.log("validateDateOfBirthDropDown complete");
    }
    var checkSelectPopulated = function(valLocal){
            if(valLocal == "" || valLocal == "notselected"){
                    return false;
            }
            return true;

}

Answer 1

you can add this javascript code on form submit

<script>
function checkdate()
{
var x1=document.forms["form-name"]["dob-dd-select"].value;
var x2=document.forms["form-name"]["dob-month-select"].value;
var x3=document.forms["form-name"]["dob-yyyy-select"].value;
if !(x1==null || x1=="" || x2==null || x2=="" || x3==null || x3=="")
  {
  alert("Date must be filled out");
  return false;
  }

</script>


<form name="" id="" onsubmit="return checkdate()">

Answer 2

I see you tagged the question with jQuery, so you can work something around these lines:

$(function () {
    // Assuming there's just one form on the page.
    // If not, just change the selector to an appropriate one.
    $("form").on("submit", function (e) {
        // Stop form submission.
        e.preventDefault();

        // Check select values.
        var dayValid = $("#dob-dd-select").val() != "";
        var monthValid = $("#dob-month-select").val() != "";
        var yearValid = $("#dob-yyyy-select").val() != "";

        // Play with the layout
        if (!dayValid)
            $("#dob-dd-select").css("border-color", "red");

        if (!monthValid)
            $("#dob-month-select").css("border-color", "red");

        if (!yearValid)
            $("#dob-yyyy-select").css("border-color", "red");

        // Something is not right, return to the form.
        if (!dayValid || !monthValid || !yearValid)
            return false;

        // The form is valid, so submit it.
        $(this).submit();
    });
});