Please Update this to Bootstrap 4+

[ayoubkhan558-zz]

Please Update this to Bootstrap 4+

[sternj]

+1

[ayoubkhan558-zz]

4.2 is coming soon....

[jony89]

+1

[mssayari]

+

[frugan-dev]

+1

[alessandroraffa]

+1

[arthurcvm]

+1

[OlivierGrimard]

+1

[blusol850]

+1

[silent001]

I have been looking everywhere for a boostrap validator that is even close to this one and sadly this is the only one I like. It is very simple, easy to use and sadly I would like to start using Bootstrap 4+ with all my new projects and don't wish to revert back to Bootstrap 3. I really hope @1000hz decides to pick up again and add support for Boostrap 4+. Is there anyone here who has managed to fork and port this project over to support Bootstrap 4+? +1

[frugan-dev]

I'm not a javascript guru, but only altering a bit the code of the Bootstrap 4 documentation https://getbootstrap.com/docs/4.0/components/forms/#custom-styles i got a similar behavior:

<form class="needs-validation" novalidate method="POST" action="" role="form">

    <div class="form-group">
        <label for="email" class="sr-only">Email</label>
        <input type="email" name="email" id="email" class="form-control" placeholder="Email" value="" required autofocus>
        <div class="invalid-feedback"></div>
    </div>

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

<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script type="text/javascript">
(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();

                var errorElements = $(form).find('.form-control:invalid, .custom-control-input:invalid');

                $.each(errorElements, function(index, element) {
                    $(element).siblings('.invalid-feedback').html( $(element)[0].validationMessage );
                });

                $.scrollTo($(errorElements[0]), {offset: {top: -40}});
            }

            form.classList.add('was-validated');
        }, false);
    });

    var elements = document.querySelectorAll('.form-control, .custom-control-input');

    $.each(elements, function(index, element) {
        if (element.willValidate === true) {
            $(element).keyup(function() {
                if (element.checkValidity() === true) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                } else {
                    $(element).removeClass('is-valid').addClass('is-invalid');
                    $(element).siblings('.invalid-feedback').html( $(element)[0].validationMessage );
                }
            });
        }
    });
}, false);
}(jQuery));
</script>

I would be grateful if someone more experienced than me wanted to help me optimize this code ..

[simias]

I encountered this issue while upgrading my codebase to Bootstrap 4, I ended up with this very quick hack that seems to work for me:

https://github.com/simias/bootstrap-validator/commit/eed3cc5d6a4c48651286d026114fc3c768d4d8ea

Keep in mind that I only have a relatively basic usage of this library and I haven't extensively tested it, so I wouldn't be surprised if some of the functionality was still broken.

[supsup]

+1

[ccjShare]

+1

[maxiz22]

+1