javascript - 使用 HTML 表单验证仅验证可见字段？

Question

我有两组表单字段，每组都有一些具有必填属性的字段。但是，根据用户选择的内容，一组可能会被隐藏，并且这些字段不应包含在 HTML 表单验证中。到目前为止，如果我的表单中只有一个可见容器并且我填充了所有必填字段，我的表单将不会提交。由于某种原因，这些隐藏字段仍然是必需的。

有没有办法从验证中排除这些字段？

这里是示例:

var checkbox = $('.account-type');
checkbox.on('change', function() {
  var checked = false;

  checkbox.each(function() {
    checked = checked || $(this).is(':checked');
  });

  checkbox.prop('required', !checked);
});

$('.frm-Submit').on('submit', submitAdminFrm);

function submitAdminFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  alert('Submit form!');
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
    <div class="checkbox">
      <label for="user">
          <input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required> 
          <span class="label label-default">User</span>
      </label>
      <label for="staff">
          <input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required> 
          <span class="label label-info">Staff</span>
       </label>
    </div>
  </div>
  <div id="user-account" class="collapse">
    <div class="form-group required">
      <label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
      <select class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
        <option value="">-- Select the option --</option>
        <option value="0">No</option>
        <option value="1">Yes</option>
      </select>
    </div>
  </div>
  <div id="staff-account" class="collapse">
    <div class="form-group required">
      <label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
      <select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
        <option value="">-- Select the option --</option>
        <option value="0">No</option>
        <option value="1">Yes</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

如何防止隐藏容器内的字段被验证？

Answer 1

由于默认情况下两个复选框均处于关闭状态，因此请将 disabled 添加到两个 div 内的输入(选择)。然后您所要做的就是在 .change() 内，根据相应复选框的状态切换该 disabled 属性。

var checkbox = $('.account-type');

checkbox.on('change', function() {
  var checked = false;

  checkbox.each(function() {
    checked = checked || $(this).is(':checked');
  });

  checkbox.prop('required', !checked);
  
  $('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});

$('.frm-Submit').on('submit', submitAdminFrm);

function submitAdminFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  alert('Submit form!');
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
    <div class="checkbox">
      <label for="user">
          <input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required> 
          <span class="label label-default">User</span>
      </label>
      <label for="staff">
          <input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required> 
          <span class="label label-info">Staff</span>
       </label>
    </div>
  </div>
  <div id="user-account" class="collapse">
    <div class="form-group required">
      <label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
      <select disabled class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
        <option value="">-- Select the option --</option>
        <option value="0">No</option>
        <option value="1">Yes</option>
      </select>
    </div>
  </div>
  <div id="staff-account" class="collapse">
    <div class="form-group required">
      <label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
      <select disabled class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
        <option value="">-- Select the option --</option>
        <option value="0">No</option>
        <option value="1">Yes</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>