Question

我有预订表格，需要验证。某些字段已启用/禁用，具体取决于之前选择的选项。我的问题是，我禁止提交禁用字段的表单，因为它等待＆＃34;有效＆＃34;从空字段输入数据。

只有在启用了字段集的情况下，我是否可以启用/禁用这些字段的必需和数据验证？

修改这是我目前正在使用的代码。根据所选的单选按钮启用/禁用字段集。如果选中了单选按钮并且字段已启用，我希望验证字段集中的字段。现在，如果我尝试提交禁用字段集并且字段上存在验证/必需的表单，由于字段为空，我无法提交表单，因为必填字段未填写/字段验证失败。

<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

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

＆＃13;

$("#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())


})

＆＃13;

<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>

＆＃13;

如果未禁用fieldset，则启用表单验证/必需

1 个答案: