Form with validation in a Modal with tabs using bootstrap 5 - html

Question

Using a modal that inside the modal header I have a list of tabs, in the modal body I have the tab content and separated content with tab-pane, just like in the bootstrap 5. Below modal-body I have a modal footer with buttons, all separated with .
The form just validate if I insert the buttons inside the form, but with I capsulate de modal body and modal footer with tag form a problem occur, mostly in mobile.

Answer 1

Insert a dummy button inside the form for the validation part. Then use javascript for the actual events and all.
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
var form = forms[0];
function my_submit(ev) {
if (!form.checkValidity()) {
ev.preventDefault()
ev.stopPropagation()
} else {
form.submit()
}
form.classList.add('was-validated')
return false;
}
document.querySelector("#my-btn").addEventListener('click', my_submit)
form.addEventListener('submit', my_submit);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<form class="row g-3 needs-validation" novalidate>
<div class="col-sm-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-sm-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-sm-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button id="btn" class="btn btn-primary" type="submit" style="display:none">Submit form</button>
</div>
</form>
<button id="my-btn" class="btn btn-primary" type="submit">I am out of form submit</button>