Replace Bootstrap’s JavaScript Form Validation with jQuery Equivalent – Plus Focus First Invalid

I tend to implement Bootstrap > Documentation > Components > Forms > Validation but feel it makes sense to use jQuery since it is required by many Bootstrap components 🤷‍♂️

Code to replace provided example…

$('.needs-validation').submit(function(event) {
    if ($(this)[0].checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    $(this).addClass('was-validated');
    $('.form-control:invalid')[0].focus();
});

Note: That last line focuses on the first invalid field 😉

Original Bootstrap Javacript example…

(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        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);
})();

Suggestions or improvements? Comment below 😊

Leave a Reply

Your email address will not be published. Required fields are marked *