Добавление функциональности для отправки кнопки в форме подтверждения - Bootstrap 4

Question

Я знаю, что это простое исправление, но через несколько поисков в Google я не могу найти ответ на свой вопрос. Я использую форму проверки из bootstrap 4, и я просто пытаюсь добавить функциональность к моей кнопке, просто связав ее с другой страницей. Я попытался использовать тег привязки,

, то есть <a href="www.mysite.com" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Submit</a>

, который будет работать, но очевидно, что проверка обойдена.

, поэтому в настоящее время у меня есть эта кнопка в форме:

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

</form>

с этим сценарием java:

<script>
// 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);
})();
</script>

Что нужно добавить к js, чтобы кнопка работала ?? Спасибо за любую помощь !!

Answer 1

Вот упрощенная версия, код тщательно прокомментирован.

// wait for page to load then run the code inside 
window.onload = () => {
  // Select the form we want to validate
  let form = document.querySelector('form');

  // listen for submit event
  form.onsubmit = (event) => {
    // prevent the form from posting so the page won't refresh
    event.preventDefault();
    // debugging log statememnet  (not needed)
    console.log('Form submitted')
    // checking for form validation
    if (form.checkValidity() === false) {
      // if we're inside this if statement, the form is invalid
      // we add the boostrap class to handle styling
      form.classList.add('was-validated');
      // debugging log statememnet  (not needed)
      console.log('Form not valid')
    } else {
      // if we're inside this if statement, the form is valid and ready for further actions
      // debugging log statememnet  (not needed)
      console.log('Form valid')
      // redirect to the target page
      location.href = "www.example.com"
    }
  }
};

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Если вы новичок, я предлагаю вам держаться подальше от библиотек и просто поиграть с vanilla js / css собрать все с нуля, если вы застряли исследуйте каждую строку кода, тогда и только тогда вы можете начать возиться с библиотеками и тому подобным.