Bootstrap 4 Chosen Validation

bootstrap4c-chosen doesn't work with BS4 suggested validation technique so I add my own here

by richardwo

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://haubek.github.io/dist/css/component-chosen.min.css">
<div class="container">
    <form class="needs-validation" novalidate>
        <!-- Element using bootstrap4c-chosen -->
        <div class="form-group">
            <select class="form-control form-control-chosen" data-placeholder="Choose one" required>
                <option></option>
                <option value="1">One</option>
                <option value="2">Two</option>
            </select>
            <div class="invalid-feedback">Choose one</div>
        </div>
        <!-- Standard Bootstrap Select element -->
        <div class="form-group">
            <select class="form-control" required>
                <option value="">Choose one</option>
                <option value="1">One</option>
                <option value="2">Two</option>
            </select>
            <div class="invalid-feedback">Choose one</div>
        </div>
        <button class="btn btn-primary" type="submit">Submit form</button>
    </form>
</div>

JavaScript

$('.form-control-chosen').chosen();
// 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);
})();
$('form').on('submit', function(){
	$('.form-control-chosen[required]').each(function(){
    	if ( $( this ).val() == '' ) $( this ).next().removeClass('is-valid').addClass('is-invalid');
        else $( this ).next().removeClass('is-invalid').addClass('is-valid');
    });
});