我正在为我的雇主编辑一个 HTML 表单,其中包含一个包含三个选择框的“出生日期”字段集:“日”、“月”、“年”。出生日期不需要提交表格。但是,他们需要我创建一个表单验证,这样用户就不能只在三个选择框中的一个或两个中选择选项。换句话说,如果选择了 Date of Birth 字段集中的任何内容,则必须全部选中它们才能使表单验证。如果用户尝试只选择日而不是月或年,他们希望所有三个选择框在提交时都更改为红色边框和不同颜色的背景,并禁用提交按钮,直到做出或清除所有选择。他们还希望在选择框下方显示一条错误消息,
我对 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。不确定在哪里添加 CSS 样式更改。其他一切(错误消息和禁用的提交按钮)都正常工作:
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;
}