如果单击按钮，则显示两种形式之一

Question

我需要一些帮助。我想创建一个有两个按钮的网页，具体取决于选择的按钮我想显示表单 1 或表单 2。接下来的事情是，如果用户选择表单 1 的按钮，我只想对表单进行验证选定的表格。

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

<button type="button" class="btn btn-outline-primary">show form 1</button>
<button type="button" class="btn btn-outline-primary">show form 2</button>

<br>

<form id="form1" class="needs-validation" novalidate>
  <hr>
  <p>THIS IS FORM 1</p>
  <hr>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">form1 box 1</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">form1 box 2</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>

  </div>
  <button class="btn btn-primary" type="submit">Submit form1</button>
</form>

<br>

<form id="form2" class="needs-validation" novalidate>
  <hr>
  <p>THIS IS FORM 2</p>
  <hr>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">form2 box 1</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">form2 box 2</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>

  </div>
  <button class="btn btn-primary" type="submit">Submit form2</button>
</form>

Answer 1

看看它是否符合你的要求。

我刚刚向按钮添加了一个事件，它只是翻转了两个表单的显示属性。 对于验证，仅验证显示的表单，但一旦验证表单，它就会保持验证状态。

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

function toggle(i) {
  let form1 = document.getElementById('form1');
  let form2 = document.getElementById('form2');

  if (i == 1) {
    form1.style.display = 'none';
    form2.style.display = 'block';
  } else {
    form1.style.display = 'block';
    form2.style.display = 'none';
  }
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<button type="button" id="btn1" class="btn btn-outline-primary" onclick="toggle(2)">show form 1</button>
<button type="button" class="btn btn-outline-primary" onclick="toggle(1)">show form 2</button>
<br><br>


<form id="form1" class="needs-validation" novalidate>
  <hr>
  <p>THIS IS FORM 1</p>
  <hr>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">form1 box 1</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">form1 box 2</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>

  </div>
  <button class="btn btn-primary" type="submit">Submit form1</button>
</form>

<form id="form2" class="needs-validation" style="display:none" novalidate>
  <hr>
  <p>THIS IS FORM 2</p>
  <hr>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">form2 box 1</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">form2 box 2</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>

  </div>
  <button class="btn btn-primary" type="submit">Submit form2</button>
</form>

对于这种事情，我建议你顺便使用一些框架，比如vuejs，或者对于简单的事情也可以使用jquery。