jquery-multifile-plugin conflict with jquery.validate.js

[GoogleCodeExporter]

Creating a form with jquery-plugin-multifile e jquery.validate.js, there is a 
problem in the "file fields" where you put the attribute, for example, 
maxlength = "2". With maxlegth="2" attribute, I should be able to load only 2 
files, but instead, every time I add a file, the message in red: "Please enter 
no more than 2 characters." appears above the field. Furthermore, clicking on 
the red text, I can add other files. What is the solution to this problem?

Best regards

Original issue reported on code.google.com by m.gala...@gmail.com on 5 Dec 2011 at 4:28

[GoogleCodeExporter]

This is a collision with a browser specific feature. Use class="{max:2}" instead

Original comment by diego.a...@gmail.com on 5 Dec 2011 at 4:57

• Changed state: Accepted
• Added labels: Usability

[GoogleCodeExporter]

i tried to put class="{max:2}" instead of maxlength="2" but the limit is not 
respected

<script type="text/javascript" language="javascript">
  $(function(){ // wait for document to load 
    $('#demobox').MultiFile({ 
      list: '#listaDemo',
      STRING: {
        file: '<em title="Click to remove" onclick="$(this).parent().prev().click()">$file</em>',
        remove: '<img src="form/bin.gif" height="16" width="16" alt="x"/>'
      }
    }); 
  });
</script>

<input type="file" id="demobox" class="{max:2}" name="demo[]" accept="mp3"/>

<div id="listaDemo" style="border:#999 solid 3px; padding:10px;">

</div>

Original comment by m.gala...@gmail.com on 5 Dec 2011 at 5:22

[GoogleCodeExporter]

Try the method used in method 4:
http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples

Original comment by diego.a...@gmail.com on 5 Dec 2011 at 6:43

[GoogleCodeExporter]

I tried with <input type="file" id="demobox" class="multi max-7 accept-mp3"
name="demo[]" /> and now work, but don't work the insert in custom box:

<script type="text/javascript" language="javascript">
  $(function(){ // wait for document to load
    $('#demobox').MultiFile({
      list: '#listaDemo',
      STRING: {
        file: '<em title="Click to remove"
onclick="$(this).parent().prev().click()">$file</em>',
        remove: '<img src="form/bin.gif" height="16" width="16" alt="x"/>'
      }
    });
  });
</script>

<input type="file" id="demobox" class="multi max-7 accept-mp3"
name="demo[]" />

<div id="listaDemo" style="border:#999 solid 3px; padding:10px;">
  Elenco dei file che si voglio caricare:
  <br/><br/>
</div>

Original comment by m.gala...@gmail.com on 6 Dec 2011 at 10:00

[GoogleCodeExporter]

class="multi" is the problem. I have remeved them and now work fine. 
try this:
<input type="file" id="demobox" accept="mp3" maxlength="7" name="demo[]" />

ciao

Original comment by i...@crabinformatica.com on 13 Dec 2011 at 12:12

[GoogleCodeExporter]

I tried as you suggested me
<input type="file" id="demobox" accept="mp3" maxlength="7" name="demo[]" /> 

but the message in red (from jquery validate): "Please enter no more than 7 
characters." appears above the field. 

I can not resolve the conflict :(

Original comment by m.gala...@gmail.com on 19 Dec 2011 at 11:49

[GoogleCodeExporter]

remove maxlength and put them in the $(func)...!

<script type="text/javascript" language="javascript">
  $(function(){ // wait for document to load
    $('#demobox').MultiFile({
        max: 7,
    accept: 'mp3',
    list: '#listaDemo',
      STRING: {
        file: '<em title="Click to remove"
onclick="$(this).parent().prev().click()">$file</em>',
        remove: '<img src="form/bin.gif" height="16" width="16" alt="x"/>'
      }
    });
  });
</script>

<input type="file" id="demobox" name="demo[]" />

<div id="listaDemo" style="border:#999 solid 3px; padding:10px;">
  Elenco dei file che si voglio caricare:
  <br/><br/>
</div>

Original comment by i...@crabinformatica.com on 19 Dec 2011 at 2:20

[GoogleCodeExporter]

Original comment by diego.a...@gmail.com on 9 Jul 2013 at 12:32

• Changed state: Verified