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

Posted 2023-05-08

【中文标题】输入类型文件无法使用 bootstrapvalidator 进行验证

【英文标题】：Input type file cannot get validate using bootstrapvalidator

【发布时间】：2020-03-13 17:14:07

【问题描述】：

您好，我在 Laravel 5.8 中实现了 Bootstrap 4 模式。为了验证，我添加了 bootstrapvalidator

面临的问题是我可以在所有输入类型文本为空时对其进行验证，但对于文件我无法使用验证器进行验证。

参考图片

https://ibb.co/wKjB0Jp

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

刀片文件

<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'
                    
                
            
        
       
    );
);

任何帮助将不胜感激！

【参考方案1】：

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

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

我希望这对你有用

【讨论】：

我已经按照您的建议进行了尝试，但我仍然收到默认的必需消息。我该如何解决这个问题？请指导我

在第二个文件字段中添加： customFile: validators: file: minFiles: 1, extension: 'jpeg,png', type: 'image/jpeg,image/png', message: '所选文件无效'

我已经在我的代码中添加了这些东西。请在问题上查看它。

你缺少这个 minFiles: 1，

我也检查了 minFiles 1，但我仍然只收到默认的必需消息。我不确定，我必须在哪里检查。