JQuery Validate input file type

Question

I have a form that can have 0-hundreds of  lt input type  file  gt  elements  I have named them sequentially depending on how many are dynamically added to the page    For example    lt input type  file  required    name  fileupload1  id  fileupload1  gt   lt input type  file  required    name  fileupload2  id  fileupload2  gt   lt input type  file  required    name  fileupload3  id  fileupload3  gt   lt input type  file  required    name  fileupload999  id  fileupload999  gt    In my JQuery I want to validate these inputs on acceptable MIME file type  Like this       formNew   validate       rules            fileupload                required  true               accept   image jpeg  image pjpeg                    Immediately my problem is that the name attribute of the input file elements is dynamic  It has to be dynamic so that my web application can deal with each upload correctly  So obviously using  fileupload  isn t going to work in the rules section   How do I set the rules for all inputs which have a name like  fileupload    This is the code that dynamically adds the inputs   var filenumber   1      AddFile   click function        User clicks button  AddFile         lt li gt  lt input type  file  name  FileUpload    filenumber      id  FileUpload    filenumber      required     gt   lt a href     class  RemoveFileUpload  gt Remove lt  a gt  lt  li gt    prependTo   FileUploader        filenumber        return false          FileUploader   on  click     RemoveFileUpload   function        Remove input     if  filenumber  gt  0              this  parent  li   remove            filenumber--            return false

User · Answer

Simply use the  rules  add   method immediately after creating the element     var filenumber   1      AddFile   click function        User clicks button  AddFile         create the new input element         lt li gt  lt input type  file  name  FileUpload    filenumber      id  FileUpload    filenumber        gt   lt a href     class  RemoveFileUpload  gt Remove lt  a gt  lt  li gt    prependTo   FileUploader            declare the rule on this newly created input field                 FileUpload    filenumber  rules  add             required  true       lt - with this you would not need  required  attribute on input         accept   image jpeg  image pjpeg               filenumber       increment counter for next time      return false         You ll still need to use  validate   to initialize the plugin within a DOM ready handler  You ll still need to declare rules for your static elements using  validate      Whatever input elements that are part of the form when the page loads    declare their rules within  validate    You don t need to use  each    when you re only targeting ONE element with the jQuery selector attached to  rules    You don t need the required attribute on your input element when you re declaring the required rule using  validate   or  rules  add     For whatever reason  if you still want the HTML5 attribute  at least use a proper format like required  required     Working DEMO   http   jsfiddle net 8dAU8 5

User · Answer

One the elements are added  use the rules method to add the rules    bug fixed thanks to  Sparky    input name   fileupload     each function            this  rules  add             required  true          accept   image jpeg  image pjpeg              Demo  Fiddle    Update  var filenumber   1      AddFile   click function        User clicks button  AddFile     var  li       lt li gt  lt input type  file  name  FileUpload    filenumber      id  FileUpload    filenumber      required     gt   lt a href     class  RemoveFileUpload  gt Remove lt  a gt  lt  li gt    prependTo   FileUploader             FileUpload    filenumber  rules  add             required  true          accept   image jpeg  image pjpeg              filenumber        return false

User · Answer

So  I had the same issue and sadly just adding to the rules didn t work  I found out that accept  and extension  are not part of JQuery validate js by default and it requires an additional-Methods js plugin to make it work   So for anyone else who followed this thread and it still didn t work  you can try adding additional-Methods js to your  tag in addition to the answer above and it should work

[jquery] JQuery Validate input file type

Examples related to jquery

Examples related to jquery-validate