Bootstrap form validation in jQuery instead of plain JavaScript? - Stack Overflow

admin管理员组

文章数量:1302328

I found this on Bootstrap to use Bootstrap form validation. Why is the example in plain JavaScript instead of jQuery when the rest of Bootstrap scripts are in jQuery?

How can this be done with jQuery?

.0/ponents/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>

I found this on Bootstrap to use Bootstrap form validation. Why is the example in plain JavaScript instead of jQuery when the rest of Bootstrap scripts are in jQuery?

How can this be done with jQuery?

https://getbootstrap./docs/4.0/ponents/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>

• javascript
• jquery
• twitter-bootstrap
• bootstrap-4

Share Follow edited Sep 5, 2018 at 9:06 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Sep 5, 2018 at 8:50 AndersAnders 1111 gold badge11 silver badge55 bronze badges 2

• Is this an official part of the Bootstrap source? If it's by a third party, then it's most likely just written in whatever they felt most fortable with – Rory McCrossan Commented Sep 5, 2018 at 8:51
• No it is from the documentation: getbootstrap./docs/4.0/ponents/forms/#validation – Anders Commented Sep 5, 2018 at 8:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

use Jquery Validation : https://jqueryvalidation/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./jquery-3.2.1.min.js"></script>
   
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
 
 <script src="https://cdn.jsdelivr/npm/[email protected]/dist/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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"  autoplete='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"  autoplete='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" autoplete='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>
                                

$(document).ready(function(){

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

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

});

This example was most likely written in JS as that's what the author of the Bootstrap documentation was most fortable with. You can convert it to jQuery like this:

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

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

本文标签： Bootstrap form validation in jQuery instead of plain JavaScriptStack Overflow