问题描述:

I'm working on a multi-step form with required fields. My JavaScript vocabulary is still limited so forgive me if I'm not quite clear.

In my form I've built an optional section with some JQuery that reveals a div if a user checks a check box. The new div has radio buttons to provide additional options to the user. If the "Operator Assisted Pre Record" button is chosen, a div appears with a text input that needs to have information.

My goal is to have the date field throw an alert only if the "Operator Assisted Pre Record" option is selected and then clicks the "Next" button. I am able to get this functioning, somewhat. Right now, the alert fires immediately when the user chooses the option. This isn't necessarily a bad thing, because I need the user to input a date. However, if the user still tries to move on to the next page while ignoring the required date no alert is prompted and the user moves on.

A live test live link is available at and a 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>

网友答案:

There are many ways you can deal with this but one is to simply check if the required input field is visible (in addition to checking its value) with $("#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;
    }
}
相关阅读:
Top