Question

嗨，我已经在Laravel 5.8中实现了Bootstrap 4模式。为了进行验证，我添加了bootstrapvalidator

面临的问题是，我可以在输入类型为空的情况下验证所有输入类型的文本，但是当涉及文件时，我无法使用验证器进行验证。

参考图片

到目前为止，我已经完成了代码

刀片文件

<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文件

 $(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'
                    }
                }
            }
        }
       }
    });
});

任何帮助都会得到感谢！

Answer 1

对于自定义，可以使用以下代码进行验证。

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

我希望这对您有用

输入类型文件无法使用bootstrapvalidator进行验证

1 个答案: