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. You may also like How to Remote call using bootstrap validator and How to validate bootstrap form using jQuery.

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>