Impose max combined file size for file inputs through jQuery validator -

i have interesting scenario @ hand, i'm not versed jquery validate @ moment.

goal: using fileapi, determine file size of each file uploaded in multiple <input type="file" /> controls while using jquery validate plugin, ensuring combined total of bytes not greater 50mb. these elements can dynamically added/deleted.

for sake of consistency, i'd validation work through jquery validator plugin, error message appended under last input file control.

from understand, adding method validator verifies 1 element @ time, guess first question, can single method validate multiple elements once opposed being fired each element.

ex.:

<input type="file" name="file1" id="file1" />

<input type="file" name="file2" id="file2" />

<input type="file" name="file3" id="file3" />

<script type="text/javascript">     $(function() {         // add rule elements when document ready         $('input[type="file"]').rules("add", {             totalfilesize: true         });     });      jquery.validator.addmethod("totalfilesize", function(value, element) {          // if there's 3 input elements, should fire once and,          // if totalfilesize > 50mb, display error under last input element      }, "total file size large"); </script> 

from understand, adding method validator verifies 1 element @ time, guess first question, can single method validate multiple elements once opposed being fired each element.

yes, each element verified against each rule declared upon it.

no, single method cannot validate multiple elements @ once. rule/method declared on each element , each of these elements validated against 1 @ time.

edit: forgot skip_or_fill_minimum , require_from_group rules part of the additional-methods.js file. these rules examples of methods can evaluate several fields @ once. rule must declared on each field considered evaluation, , the groups option used condense duplicate messages one.

play around here: jsfiddle.net/r32vbm8j/

however, these 2 example rules fired when submit button clicked. in case, it's not fired once... fired on each declared field, same other rules on form.

---

you cannot this...

$('input[type="file"]').rules("add", {     totalfilesize: true }); 

since $('input[type="file"]') selector can represent multiple elements, first matching element attached .rules(), , other matching elements ignored.

to attach .rules() multiple elements requires iteration using jquery .each().

$('input[type="file"]').each(function() {     $(this).rules("add", {         totalfilesize: true     }); }); 

---

edit:

the problem in end groups display rules assigned individual element @ single unified point, whereas need display 1 error message x number of elements while retaining other error messages assigned respective elements. end result want each of file inputs display "file cannot exceed 10mb" error message, have second validation checks sum of sizes, "sum of files cannot exceed 50mb" 1 error message should singled out, not needlessly repeated.

1. employ the showerrors callback function. suppress individual error messages long leave out this.defaultshowerrors() line.

2. within showerrors function have access following arguments can construct own consolidated or individual messages see fit.

errormap - key/value pairs, key refers name of input field, values message displayed input.

errorlist - array validated elements. contains objects following 2 properties: message , element.

$('form').validate({     showerrors: function(errormap, errorlist) {         // parse , display messages needed     },     ....