Bootstrap form validation in jQuery instead of plain JavaScript?

Question

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

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 comfortable with — Rory McCrossan
– Rory McCrossan, Commented Sep 5, 2018 at 8:51
No it is from the documentation: getbootstrap.com/docs/4.0/components/forms/#validation — Anders
– Anders, Commented Sep 5, 2018 at 8:54

Saurabh Mistry · Accepted Answer · 2018-09-05 09:09:38Z

use 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/[email protected]/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>

A Timmins · Accepted Answer · 2018-12-03 23:30:33Z

3

$(document).ready(function(){

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

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

});

answered Dec 3, 2018 at 23:30

A Timmins

313 bronze badges

3 Comments

GMB Over a year ago

It would be nice to also include an explanation on how what caused the original issue and how your answer helps solve it

A Timmins Over a year ago

@GMB The question was to convert a piece of plain JavaScript to jQuery. I don't feel it needs any explanation.

Neftali Acosta Over a year ago

it works for me, but as a way to validate in a form that both passwords are equal.

Rory McCrossan · Accepted Answer · 2018-09-05 09:03:07Z

1

This example was most likely written in JS as that's what the author of the Bootstrap documentation was most comfortable 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');
    });
  });
})();

answered Sep 5, 2018 at 9:03

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Neftali Acosta Over a year ago

it works for me, but as a way to validate in a form that both passwords are equal.

Collectives™ on Stack Overflow

Bootstrap form validation in jQuery instead of plain JavaScript?

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related