Input type file cannot get validate using bootstrapvalidator

Question

Hi I have implemented Bootstrap 4 modal in Laravel 5.8. For Validation I have added bootstrapvalidator

The problem am Facing is I can validate all Input type text when its empty but when it comes to file I can't validate using validator.

Reference as image

https://ibb.co/wKjB0Jp

So Far code I have done

Blade File

<div class="modal" id="myModal" role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
    <div class="modal-dialog modal-width">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Management Details </h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="panel panel-container hide-img-upload">
                <form action="{{ route('manage.detail.post') }}" id="managedetail" method="POST" enctype="multipart/form-data">
                    @csrf
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                        <div class="form-group row">
                            <label for="customFile" class="col-sm-4 col-form-label">Image Upload</label>
                            <div class="col-sm-8">
                                <div class="custom-file mb-3">
                                    <input type="file" class="custom-file-inputs" id="customFile" name="image" required>
                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                            <label for="managementpost" class="col-sm-4 col-form-label">Management Position</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="managementpost" placeholder="Management Position" name="managementpost">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <button type="submit" class="btn btn-success">Confirm</button>
                            </div>
                        </form>
                    </div>
                </div>
            </form>
        </div>
    </div>

JS File

 $(document).ready(function() {
  $('#managedetail').bootstrapValidator({
     fields: {
          managementpost: {
                validators: {
                    notEmpty: {
                        message: 'The Management Post is required'
                    }
                }
            }, 
           fields: {
            customFile: {
                validators: {
                    file: {
                        extension: 'jpeg,png',
                        type: 'image/jpeg,image/png',

                        message: 'The selected file is not valid'
                    }
                }
            }
        }
       }
    });
});

Any Help will be Appreciated !!

Answer 1

for custom, the validation you can uses the below code.

<input name="image" class="custom-file-inputs" type="file"  required=""  
    oninvalid="this.setCustomValidity('Please upload document')"
    oninput="setCustomValidity('Image file is required')"/>

I hope this will work for you