Ignore required form fields if bootstrap 5 accordion is closed

Question

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 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>