javascript - 如果未禁用字段集，则启用表单验证/必需

Question

我有一张预订表格，需要验证。某些字段的启用/禁用取决于之前选择的选项。我的问题是，我无法提交禁用字段的表单，因为它等待来自空字段的“有效”输入数据。

是否有一种方法可以仅在启用字段集时启用/禁用这些字段的必需验证和数据验证？

编辑这是我当前正在使用的代码。根据所选的单选按钮启用/禁用字段集。如果选择单选按钮并启用字段，我希望验证字段集中的字段。现在，如果我尝试在禁用字段集且字段上存在验证/必需的情况下提交表单，则由于必填字段未填写/字段验证由于字段为空而失败，因此我无法提交表单。

<div class="col-sm-2">
    <div class="form-check">
        <label class="radio-inline">
            <input type="radio" name="oneRetOpt" id="returntrf" onclick="enableReturn()">
            Return
        </label>
    </div>
</div>


<fieldset id="returnfields" disabled>
    <div class="row" style="padding-bottom: 5px">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="transferTypeRet">Transfer Type:</label>
                <select class="form-control" placeholder="Transfer Type" id="transferTypeRet">
                    <option> </option>
                    <option>Direct Tranfser</option>
                    <option>Split Transfer</option>
                </select>
                <p class="help-block text-danger"></p>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="form-group">
                <label for="numadultsRet">Adults:</label>
                <input type="number" min="0" class="form-control" placeholder="Number of Adults" id="numadultsRet" >
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <label for="numchildRet">Children:</label>
                <input type="number" min="0" class="form-control" placeholder="Number of Children (under 12 years old)" id="numchildRet" >
                <p class="help-block text-danger"></p>
            </div>
        </div>
    </div>

    <div class="row" style="padding-bottom: 5px">
        <div class='col-sm-6'>
            <div class="form-group">
                <label for="datetimeret">Date and Time:
                    <a href="#" data-toggle="timeTooltip"
                       title="Provide flight landing or departure time for airport transfers">
                        <i class="fa fa-info-circle"></i></a>
                </label>
                <div class='input-group date form_datetime' data-date-format="dd MM yyyy - HH:ii" id='datetimeret'>
                    <input class="form-control" type="text" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="padding-bottom: 5px">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="pickupret">Pick-up Location: </label>
                <input type="text" class="form-control" placeholder="Pick-up location" id="pickupret">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label for="dropoffret">Drop-off Location: </label>
                <input type="text" class="form-control" placeholder="Drop-off location" id="dropoffret">
                <p class="help-block text-danger"></p>
            </div>
        </div>
    </div>
</fieldset>

<script type="text/javascript">
    function enableReturn() {
            document.getElementById("returnfields").disabled = false;
    }
</script>

Answer 1

您可以考虑在表单的提交逻辑中处理它。请参阅下面的示例。如果您可以有条件地评估某些输入，您甚至可以绕过验证。

$("#myform").submit( function(event){
event.preventDefault();
var form = $("#myform");
console.log(form)
form.validate()
alert(form.valid()) 

form.children("#input1").remove()

form.validate()
alert(form.valid())


})

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form id = "myform" novalidate>
  <input id= "input1"  required>
  <input id= "input2"  required>
  <input type = "submit"> 
</form>