jQuery validate不会验证具有多个属性的文件是否为空

Question

我有一个接受文本信息的表格，还有一个带有多个属性的文件输入，一切正常，直到我发现如果file字段为空，它将无法正常工作，文件上传应该是可选的，但是挑战是：如果文件输入为空，jQuery验证将无法正常工作。但是只要有内容，jquery validate就可以工作。 我要达到的目的是：我需要它来验证表单，但是多个文件输入字段应该是可选的，但是当选择文件时，它应该验证它们。 我使用jQuery和Laravel。 这是我的代码。 我的html：

<form id="questionForm" method="POST" enctype="multipart/form-data">
  @csrf
 <div class="form-inputs clearfix">
<p>
   <label class="required">Question Title<span>*</span></label>
   <input type="text" id="question-title" name="title">                                                
   <span class="form-description">Please choose an appropriate title for the question to answer it even easier .</span>
 </p>                                            
<div class="clearfix"></div>
 <p>
   <label>Attachment</label>
           <div class="fileinputs">
                <input type="file" class="file" name="images[]" id="photo" multiple style=""/>
          <div class="fakefile">
   <button type="button" class="button small margin_0" id="fake_btn">Select file</button>
    <span><i class="icon-arrow-up"></i>Browse</span>
    </div>
</div>
</p>
<div id="form-textarea">
   <p>
    <label class="required">Details<span>*</span></label>
    <textarea id="question-details" name="question" aria-required="true" cols="58" rows="8"></textarea>
  <span class="form-description">Type the description thoroughly and in detail .</span>
   </p>
</div>
 <center><span><img src="../../svg/loader.gif" style="width:30px;height:30px;" id="loader-icon"/></span></center>
<div class="alert-message success">
  <i class="icon-ok"></i>
 <p><span>success</span><br>
 </p>
  </div>
 <p class="form-submit">
     <button id="publish-question" class="button color small submit">Publish Your Question</button>
 </p>
</form>

这是我的jquery中的内容。

正如sparky所建议的，这是我的maxFileSize和maxFilesToSelect的代码

$.validator.addMethod('filesize', function (value, element, param) {
        return this.optional(element) || (element.files[0].size <= param)
        }, 'File size must be less than {0}');

        $.validator.addMethod('maxFileSize', function (value, element, param) {
        var lg = element.files.length;
        var items = element.files;
        var fileSize = 0;
        if (lg > 0) {
            for (var i = 0; i < lg; i++) {
                fileSize = fileSize+items[i].size; // get file size
            }
            if(fileSize > param) {
                return false;
            }else{
                return true;
            }
        }
        if(element.files[0].size <= param){
            return true;
        }
        }, 'Each file should be less or equal to 2MB');

无论如何这不是问题，因为它可以很好地工作

$("#questionForm").validate({
            rules: {
                title: {
                    required: true,
                    minlength: 10,
                    maxlength: 100
                },
                question: {
                    required: true,
                    minlength: 20,
                },
                'images[]': {
                    extension: "jpg,jpeg,png",
                    maxFileSize: 2097152,//i have this setup
                    maxFilesToSelect : 4,//this works aswell
                }
            },
            messages: {
                title: {
                    required: 'Please enter a title for this Question.',
                    minlength: 'minimum title lenght must be above 10 characters',
                    maxlength: 'exceeded the allow number of characters for title field'
                },
                question: {
                    required: 'Please enter a description for this Question.',
                    minlength: 'minimum body lenght must be above 20 characters'
                }
            },
            submitHandler:function(form){
                $('#publish-question').html('Sending..');
                $('#publish-question').attr('disabled','disabled');
                $('.alert-success').hide();
                $('#loader-icon').fadeIn();
                var oData = new FormData(form);
                $.ajax({
                    async: true,
                    url: "/save",
                    method: 'POST',
                    data: oData ,
                    processData: false,
                    contentType: false,
                    success:function(data){
                        //do something
                     }
                });
                return false;
            }
        });

是否可以做类似

的操作

required:false //just to make it validate only when field has file.

这就是我的控制器中的内容：

public function store(Request $request){
        $attribute = Validator::make($request->all(),[
            'title' => 'required|min:10',
            'question' => 'required|min:20',
            'images.*' => 'nullable|image|mimes:jpg,jpeg,png|max:2048'
        ]
        );
}

感谢您的期待。