Question

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

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

我的目标是让日期字段仅在选择“操作员辅助预记录”选项然后单击“下一步”按钮时才会发出警报。我能够在某种程度上实现这一功能。现在，当用户选择该选项时，警报立即触发。这不一定是坏事，因为我需要用户输入日期。但是，如果用户仍然尝试移动到下一页而忽略了所需的日期，则不会提示警报并且用户继续前进。

现场测试live link位于fiddle

 $("#preRecord").click(function() {
   if ($(this).prop('checked') === true) {
     $('#preRecordOpt').slideDown();
   } else {
     $('#preRecordOpt').slideUp();
     $('#opAssistPreRecOpt').slideUp();
   }
 });

 $("#opAssistedPreRecord").click(function() {
   if ($(this).prop('checked') === true) {
     $('#opAssistPreRecOpt').slideDown();
   } else {
     $('#opAssistPreRecOpt').slideUp();
   }
 });


 $("#unAssistedPreRecord").click(function() {
   if ($(this).prop('checked') === true) {
     $('#opAssistPreRecOpt').slideUp();
   }
 });

 $("#broadcastPreRecordExternal").click(function() {
   if ($(this).prop('checked') === true) {
     $('#opAssistPreRecOpt').slideUp();
   }
 });

 function next2Click() {
   var preRecordMonth = document.forms["cc_audioReservationRequestForm"]["preRecordDate_1"].value;
   $("#preRecordDate_1").removeClass("attention");
   if ($("#preRecordDate_1").val() == "") {
     alert("Please include required information.");
     $("#preRecordDate_1").focus();
     $("#preRecordDate_1").addClass("attention");
     return false;
   }
 }

.attention {
  border: solid 3px red!important;
  padding: 2px;
}

.preRecordOpt {
  display: none;
}

.opAssistPreRecOpt {
  display: none;
}

.partInfoOtherInput {
  display: none;
}

<form name="cc_audioReservationRequestForm" method="post" action="#" autocomplete="off" data-toggle="validator">
  <fieldset>
    <legend>
      <input type="checkbox" id="preRecord" />Additional Options
    </legend>
    <div id="preRecordOpt" class="preRecordOpt form-group">
      <div class="col-md-3 col-xs-8 np form-group ">
        <input type="radio" name="preRecordGroup" id="opAssistedPreRecord" />Option 1</div>
      <div class="col-md-3 col-xs-8 np form-group ">
        <input type="radio" name="preRecordGroup" id="unAssistedPreRecord" />Option 2 </div>
      <div class="col-md-6 col-xs-12 np form-group ">
        <span style="float: left;"><input type="radio"name="preRecordGroup" id="broadcastPreRecordExternal"  /></span>
        <span style="width: 80%;">Option 3</span>
      </div>
      <div style="clear: both;"></div>
    </div>
    <div id="opAssistPreRecOpt" class="opAssistPreRecOpt">
      <div class="dateTime">
        <div class="col-md-3 col-xs-8 np form-group ">
          <label class="description" for="preRecordDate">Option 1 Required Input </label>
          <br />
          <div style="float: left;">
            <input class="readonly altform-control" id="preRecordDate_1" name="month" size="4" maxlength="2" value="" type="text" style="width:3.2em" tabindex="-1">
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <button type="button" id="next2" class="btn btn-next" onclick="next2Click()">Next</button>
</form>

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

Javascript：多步表格W /复选框，显示所需的隐藏字段

1 个答案: