Ignore required form fields if bootstrap 5 accordion is closed-CodePudding

I would like to ignore the required fields of a form if the accordion in which that field is located is collapsed/closed.

E.G: If I have three accordions and each accordion has an input, the first accordion has to meet the requirement of required no matter what, but the other accordions if at the moment of submitting the form they are collapsed, those fields declared as required must be ignored and the form must be able to be sent normally to the backend.

Use case:

Accordion 1: Open. Input 1 (required) has a value.

Accordion 2: Closed. Input 2 (required) has a value too.

Accordion 3: Closed. Input 3 (required) does not have a value.

Expected behavior:

Form will submit the values of Input 1 and Input 2 and will ignore Input 3 (even it's declared as a required field) or just assign a value to Input 3 like 'None'.

I have tried to find similar questions but since accordions are a new feature in bootstrap 5 I could not find anything similar.

What would be the most recommended way of doing it?

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

<form>
<div  id="accordionPanelsStayOpenExample">
  <div >
    <h2  id="panelsStayOpen-headingOne">
      <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"  aria-labelledby="panelsStayOpen-headingOne">
      <div >
        Input 1
        <input type="text" name="input_1"  aria-label="Input 1" required>
      </div>
    </div>
  </div>
  <div >
    <h2  id="panelsStayOpen-headingTwo">
      <button  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"  aria-labelledby="panelsStayOpen-headingTwo">
      <div >
        Input 2
        <input type="text" name="input_2"  aria-label="Input 2" required>
      </div>
    </div>
  </div>
  <div >
    <h2  id="panelsStayOpen-headingThree">
      <button  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"  aria-labelledby="panelsStayOpen-headingThree">
      <div >
        Input 3
        <input type="text" name="input_3"  aria-label="Input 3" required>
      </div>
    </div>
  </div>
</div>
<button  type="submit">Submit</button>
</form>

CodePudding user response：

Write a click handler in Javascript that would look for all elements that match the selector .accordion-collapse.collapse:not(.show) input and remove the required attribute from them.

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<form onclick="handleSubmit();">
<div  id="accordionPanelsStayOpenExample">
  <div >
    <h2  id="panelsStayOpen-headingOne">
      <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"  aria-labelledby="panelsStayOpen-headingOne">
      <div >
        Input 1
        <input type="text" name="input_1"  aria-label="Input 1" required>
      </div>
    </div>
  </div>
  <div >
    <h2  id="panelsStayOpen-headingTwo">
      <button  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"  aria-labelledby="panelsStayOpen-headingTwo">
      <div >
        Input 2
        <input type="text" name="input_2"  aria-label="Input 2" required>
      </div>
    </div>
  </div>
  <div >
    <h2  id="panelsStayOpen-headingThree">
      <button  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"  aria-labelledby="panelsStayOpen-headingThree">
      <div >
        Input 3
        <input type="text" name="input_3"  aria-label="Input 3" required>
      </div>
    </div>
  </div>
</div>
<button  type="submit">Submit</button>
</form>