javascript - 验证 Bootstrap 4 表单的两个复选框

Question

在 Bootstrap 4 中，我需要验证带有两个复选框的表单:

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationCustom01">First name</label>
    <input type="text" class="form-control" id="validationCustom01" placeholder="First name" required>
  </div>
  <div class="form-group row">
    <label for="validationCustom02">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" required>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
  </div>

  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

如果至少选中一个复选框，则该表单有效。

我是 Bootstrap 和 Javascript 新手。如何将复选框的验证添加到上面的脚本中？

Answer 1

我会做这样的事情。获取复选框的引用并添加额外的验证。

<form class="needs-validation" novalidate>
  <div class="form-group row">
    <label for="validationCustom01">First name</label>
    <input type="text" class="form-control" id="validationCustom01" placeholder="First name" required>
  </div>
  <div class="form-group row">
    <label for="validationCustom02">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" required>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
  </div>

  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
        // Get the first checkbox
        const checkbox1 = form.querySelector('#inlineCheckbox1');
        // Get the second checkbox
        const checkbox2 = form.querySelector('#inlineCheckbox2');
        // Detect if atleast one checkbox is checked
        const isCheckboxChecked = checkbox1.checked || checkbox2.checked;
        
          // If form is invalid or at least one checkbox is not checked -> fail validation
          if (form.checkValidity() === false || isCheckboxChecked === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>