如果 bootstrap 5 accordion 已关闭，则忽略必填的表单字段

Question

我想忽略表单的必填字段，如果该字段所在的手风琴是 collapsed/closed。

E.G：如果我有三个手风琴并且每个手风琴都有一个输入，无论如何第一个手风琴都必须满足 required 的要求，但其他手风琴如果在提交表格时他们被折叠，必须忽略那些声明为必填的字段，并且表单必须能够正常发送到后端。

用例:

手风琴 1：打开。输入 1（必需）有一个值。

手风琴 2：关闭。输入 2（必填）也有值。

手风琴 3：关闭。输入 3（必填）没有值。

预期行为：

Form 将提交 Input 1 和 Input 2 的值，并会忽略 Input 3（即使它被声明为必填字段）或只为 Input 3 赋值像 'None'.

我试图找到类似的问题，但由于手风琴是 bootstrap5 中的一项新功能，我找不到任何类似的问题。

最推荐的做法是什么？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<form>
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        Input 1
        <input type="text" name="input_1" class="form-control" aria-label="Input 1" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
      <div class="accordion-body">
        Input 2
        <input type="text" name="input_2" class="form-control" aria-label="Input 2" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
        Input 3
        <input type="text" name="input_3" class="form-control" aria-label="Input 3" required>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>

Answer 1

在 Javascript 中编写一个点击处理程序，它将查找与选择器 .accordion-collapse.collapse:not(.show) input 匹配的所有元素并从中删除 required 属性。

function handleSubmit() {
  // Make all input fields "required":
  var elements = document.querySelectorAll('.accordion-collapse.collapse input');
  elements.forEach(function(e){
    e.required = true;
  });
    
  // Un-require the hidden input fields:
  var elements = document.querySelectorAll('.accordion-collapse.collapse:not(.show) input');
  elements.forEach(function(e){
    e.required = false;
  });
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<form onclick="handleSubmit();">
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        Input 1
        <input type="text" name="input_1" class="form-control" aria-label="Input 1" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
      <div class="accordion-body">
        Input 2
        <input type="text" name="input_2" class="form-control" aria-label="Input 2" required>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
        Input 3
        <input type="text" name="input_3" class="form-control" aria-label="Input 3" required>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>

如果 bootstrap 5 accordion 已关闭，则忽略必填的表单字段

Ignore required form fields if bootstrap 5 accordion is closed

javascript

twitter-bootstrap