2

I have a file upload field, that can select and upload multiple files, I am using jquery Validate plugin for field validations, for single file upload I can successfully make use of this plugin feature, but I have no idea how to use this with multi file upload filed, Here is my html

<input type="file" required="" name="design_src[]" multiple id="design_src" />

For Single file upload I am using below js, and works as intended :>

$('#myForm').validate({
       rules: {
           design_src: {
                         required: true,
                         extension: "jpg|jpeg|png",
                         filesize: 20971520,  
                      }

})

I try to use the 'design_src[]' like this in rules, but not working, How can I achieve this.

Sparky
  • 98,165
  • 25
  • 199
  • 285
Salih K
  • 701
  • 2
  • 12
  • 31

1 Answers1

4

Please check this.

  1. You didn't close a bracket in the end "}"

  2. For single input you can use design_src, for multiple array you should use "design_src[]"

http://jsfiddle.net/rq5ra/1060/

HTML

<form id="createprofile">
  <input type="file" required="" name="design_src[]" multiple/>
  <input type="submit" />
</form>

JQuery

$('#createprofile').validate({
   rules: {
       "design_src[]": {
                     required: true,
                     extension: "jpg|jpeg|png",
                     filesize: 20971520,  
                  }
        }
});
acmsohail
  • 903
  • 10
  • 32
  • Your jsFiddle does not work properly because there is no such method called `filesize`. – Sparky Nov 26 '19 at 18:10
  • The solution is fine to use the brackets. but noticed one bug. If we select 2 files, 1st is the proper image and 2nd is a random file (such as text). There is no error message. While if we select the 1st txt file and 2nd image, it throughs the error. How can we resolve that issue? – suiz Jan 13 '21 at 11:28
  • filesize not working the actual method of validator in "maxsize" filesize: 434343 //size in bytes which is available in the additional-method.js file of plugin we can also add function for multiple file upload restriction which is maxfiles : 3 //no of files – Ateeq Oct 15 '21 at 11:36