How to validate files using bootstrap validator

BootstrapValidator.js plugin gives client side validation without page refresh. We can use simply. validator.js plugin we can add validation in our PHP project, or any framework like laravel framework, codeigniter framework, symphony framework etc. This is very interesting and simple.

bootstrapValidator.js Plugin

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>

HTML Code

<form role="form" method="post" id="registervalidation" enctype="multipart/form-data">
    <div class="form-group">
        <label>Passport <span class="required"> * </span></label><br />
        <input type="file" name="passport" tabindex="15">
    </div>
    
    <div class="form-group">
        <button class="btn btn-primary" type="submit">Submit</button>
    </div>
</form>

jQuery Code

<script type="text/javascript">
    $(function () {
        $('#registervalidation').bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                passport: {
                    validators: {
                        file: {
                            extension: 'jpg,pdf',
                            maxSize: 5 * 1024 * 1024, // 5 MB
                            message: 'Please upload a .pdf or .jpg file - max. size 5MB'
                        },
                        notEmpty: {
                            message: 'Please select Passport File'
                        }
                    }
                },
            }
        });

    });
</script>