提交前至少应选择两个输入

Question

如果未选中任何复选框，则该表单不允许发送。

我想为盒子创建一个这样的规则。必须至少填充两个盒子。否则，不应发送该表格。

下面是代码结构。

在JSfiddle

    $(document).ready(function() {
  var max_fields = 32; //maximum input boxes allowed
  var wrapper = $(".cameras"); //Fields wrapper
  var add_button = $(".add-camera"); //Add button ID
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
    }
  });
  $(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
  })
  $('#submit-btn').click(() => {
    const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
    const checkedInputs = Array.from(x).filter(input => input.valueOf()).length
    if (checkedInputs < 2) {
      alert('at least 2 inpouts  must be filled')
      return;
    }
    const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
    const checkedBoxes = Array.from(xd).filter(input => input.checked).length
    if (checkedBoxes < 1) {
      alert('at least one checkbox must be checked')
      return;
    }
    alert(`you checked ${checkedBoxes} checkboxes`)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
  <div class="camera-field">
    <button type="button" class="add-camera btn btn-primary">+ Add Camera
												</button>
  </div>

  <div class="control-group input-group">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
        </div>
      </div>
      <input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
      <div class="input-group-btn">
      </div>
    </div>
  </div>
</div>

<div class="col-sm-6 col-xl-4">
  <button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
  <div class="mt-2">
  </div>
</div>

Answer 1

您需要更改条件

• input.valueOf()应该是input.value
• checkbox < 1至checkbox < 2

$(document).ready(function() {
  var max_fields = 32; //maximum input boxes allowed
  var wrapper = $(".cameras"); //Fields wrapper
  var add_button = $(".add-camera"); //Add button ID
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
    }
  });
  $(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
  })
  $('#submit-btn').click(() => {
    const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
    const checkedInputs = Array.from(x).filter(input => input.value).length
    if (checkedInputs < 2) {
      alert('at least 2 inpouts  must be filled')
      return;
    }
    const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
    const checkedBoxes = Array.from(xd).filter(input => input.checked).length
    if (checkedBoxes < 2) {
      alert('at least two checkbox must be checked')
      return;
    }
    alert(`you checked ${checkedBoxes} checkboxes`)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
  <div class="camera-field">
    <button type="button" class="add-camera btn btn-primary">+ Add Camera
												</button>
  </div>

  <div class="control-group input-group">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
        </div>
      </div>
      <input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
      <div class="input-group-btn">
      </div>
    </div>
  </div>
</div>

<div class="col-sm-6 col-xl-4">
  <button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
  <div class="mt-2">
  </div>
</div>