Проверка формы начальной загрузки в jQuery вместо простого JavaScript?

Question

Я нашел это в Bootstrap, чтобы использовать проверку формы Bootstrap. Почему пример в простом JavaScript вместо jQuery, когда остальные сценарии Bootstrap находятся в jQuery?

Как это можно сделать с помощью jQuery?

https://getbootstrap.com/docs/4.0/components/forms/#validation

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

Answer 1

используйте Jquery Validation: https://jqueryvalidation.org/documentation/

$(document).ready(function(){

 $('#contact-form').validate({
                rules: {
                    'checkbox': {
                        required: true
                    }
                },
                highlight: function (input) {
                    $(input).addClass('is-invalid');
                },
                unhighlight: function (input) {
                   $(input).removeClass('is-invalid');
                },
                errorPlacement: function (error, element) {
                    $(element).next().append(error);
                }
            });
 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 
 <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


 <form id="contact-form" method="POST" action="/contact">
                                    <div class="form-group">  
                                       <input type="text" class="form-control" name="name" placeholder="Name" id="name" class="form-control"  autocomplete='name' value="" required>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                    <div class="form-group">
                                        <input type="email" class="form-control" name="email" placeholder="Email" id="email" class="form-control"  autocomplete='email' value="" required>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="phone" placeholder="Phone" id="phone" class="form-control" autocomplete='tel' value="" required>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                    <div class="form-group">
                                        <textarea placeholder="Message" class="form-control" name="message" rows="5" class="form-control" required></textarea>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                 


                                    <div class="container-contact-form-btn">
                                        <button class="btn btn-primary" type="submit">
                                                Send Now
                                        </button>
                                    </div>
                                </form>
                                

Answer 2

$(document).ready(function(){

    $('.needs-validation').on('submit', function(e) {
      if (!this.checkValidity()) {
        e.preventDefault();
        e.stopPropagation();
      }

      $(this).addClass('was-validated');
    });

});

Answer 3

Этот пример, скорее всего, был написан на JS, поскольку автор документации Bootstrap был наиболее доволен им. Вы можете конвертировать его в jQuery так:

(function() {
  'use strict';
  $(window).on('load', function() {
    $('.needs-validation').on('submit', function(e) {
      if (!this.checkValidity()) {
        e.preventDefault();
        e.stopPropagation();
      }

      $(this).addClass('was-validated');
    });
  });
})();