仅使用 HTML5 表单验证验证可见字段？

Posted 2023-03-24

【中文标题】仅使用 HTML5 表单验证验证可见字段？

【英文标题】：Validate only visible fields with HTML5 form validation?

【发布时间】：2018-10-03 21:54:17

【问题描述】：

我有两组表单字段，每组中都有一些具有必需属性的字段。但是，取决于用户选择的内容，一组可能会被隐藏，并且这些字段不应包含在 html5 表单验证中。到目前为止，如果我在表单中只有一个可见容器并且我填充了所有必填字段，我的表单将不会提交。出于某种原因，仍然需要这些隐藏字段。有没有办法从验证中排除这些字段？这是一个例子：

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>

如果有人知道如何防止隐藏容器内的字段验证，请告诉我。

【参考方案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>