Javascript：带有复选框的多步骤表单，显示所需的隐藏字段

我正在处理一个带有必填字段的多步骤表单。我的JavaScript词汇量仍然有限，如果我不太清楚，请原谅

在我的表单中，我构建了一个可选部分，其中包含一些JQuery，如果用户选中复选框，它将显示一个div。新的div具有单选按钮，可为用户提供其他选项。如果选择了“操作员辅助预记录”按钮，则会出现一个div，其中包含需要有信息的文本输入

我的目标是，只有在选择“操作员辅助预记录”选项，然后单击“下一步”按钮时，日期字段才会引发警报。在某种程度上，我能够让它发挥作用。现在，当用户选择该选项时，警报会立即触发。这不一定是坏事，因为我需要用户输入日期。但是，如果用户仍试图转到下一页而忽略所需日期，则不会提示任何警报，用户将继续

现场测试可在和

$（“#预记录”）。单击（函数（）{
if（$（this）.prop（'checked'）==true）{
$（'#preRecordOpt'）.slideDown（）；
}否则{
$（'#preRecordOpt'）.slideUp（）；
$（'#opassistprecopt'）.slideUp（）；
}
});
$（“#opAssistedPreRecord”）。单击（函数（）{
if（$（this）.prop（'checked'）==true）{
$（“#opassistprecopt”）.slideDown（）；
}否则{
$（'#opassistprecopt'）.slideUp（）；
}
});
$（“#独立预记录”）。单击（函数（）{
if（$（this）.prop（'checked'）==true）{
$（'#opassistprecopt'）.slideUp（）；
}
});
$（“#broadcastPreRecordExternal”）。单击（函数（）{
if（$（this）.prop（'checked'）==true）{
$（'#opassistprecopt'）.slideUp（）；
}
});
函数next2Click（）{
var preRecordMonth=document.forms[“cc_audioReservationRequestForm”][“preRecordDate_1”]。值；
$（“#preRecordDate_1”）。删除类（“注意”）；
if（$（“#preRecordDate_1”）.val（）{
警告（“请包括所需信息”）；
$（“#preRecordDate_1”）.focus（）；
$（#preRecordDate_1”）.addClass（“注意”）；
返回false；
}
}

。注意{
边框：实心3件红色！重要；
填充：2px；
}
.preRecordOpt{
显示：无；
}
.OpassistPerecopt{
显示：无；
}
.PartInfo其他输入{
显示：无；
}

附加选项
选择1
选择2
选择3
选项1所需输入


下一个

有很多方法可以解决这个问题，但其中一种方法是使用

$（“#preRecordDate_1”）.is（“：visible”）检查所需输入字段是否可见（除了检查其值之外）

哇，那正是我想要的。测试和工作！
function next2Click() {
    var preRecordMonth = document.forms["cc_audioReservationRequestForm"]["preRecordDate_1"].value;
    $("#preRecordDate_1").removeClass("attention");
    if ($("#preRecordDate_1").is(':visible') && $("#preRecordDate_1").val() == "") {
        alert("Please include required information.");
        $("#preRecordDate_1").focus();
        $("#preRecordDate_1").addClass("attention");
        return false;
    }
}