使用引导5在带制表符的模式中使用验证形式

Question

使用一个模态，在模态标题中我有一个标签列表，在模态体中我有制表符内容和分隔的内容与选项卡窗格，就像在引导5。在模态体下面我有一个带按钮的模态页脚，所有的都用。

如果我在表单中插入按钮，表单就会验证，但是由于我封装了模态体和带有标记表单的模态页脚，就会出现问题，主要是在移动中。

Answer 1

在验证部分的表单中插入一个虚拟按钮。然后对实际事件和所有事件使用javascript。

​

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

​