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

我正在为我的雇主编辑一个HTML表单，它有一个出生日期字段集，有三个选择框：“日”、“月”、“年”。提交表格时无需填写出生日期。但是，他们需要我创建一个表单验证，这样用户就不能在三个选择框中的一个或两个框中选择选项。换句话说，如果选择了“出生日期”字段集中的任何内容，则必须选择所有内容才能使表单生效。如果用户试图选择，比如说，仅选择日期而不是月份或年份，他们希望在提交时将所有三个选择框更改为红色边框和不同的颜色背景，并禁用提交按钮，直到做出或清除所有选择。他们还希望在选择框下显示一条错误消息，但是javascript已经在那里了，以使该功能正常运行

我对javascript还是相当陌生，在网上或这个网站上都找不到解决方案。我看到了其他表单验证器的例子，但没有一个像我所期望的那样

下面是我正在使用的HTML代码的一个简短版本，它来自开发团队：

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

---

}

您可以在表单提交中添加此javascript代码

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

函数checkdate（）
{
var x1=文档.forms[“表单名称”][“dob dd select”].值；
var x2=document.forms[“form name”][“dob month select”]。值；
var x3=document.forms[“form name”][“dob yyyy select”]。值；
如果！（x1==null | | x1==“”| | x2==null | | x2==“”| | x3==null | | x3==“”）
{
警报（“必须填写日期”）；
返回false；
}

我看到您用jQuery标记了这个问题，因此您可以围绕以下几行进行操作：

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

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