3

I am validating my form with Jquery validator "http://jqueryvalidation.org/". I am getting an issue when I am validating the "<input type="file" />" field, its "required: true," validation is working and when I accept the wrong file type it throws error. But in "IE and Chrome" if I select the correct file format, still it gives the error, though its working correctly in Firefox.

Created the Fiddle too... This is how it is exactly working for me: http://jsfiddle.net/aasthatuteja/v6x8P/

**If you check in Chrome & IE it will give the issue, but if you check in Firefox it will work and will give the aert for "Submitted"!

enter image description here

Please find the code mentioned below:-

Jquery

<script src="~/Scripts/js/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>

<script>

    $().ready(function () {

        // validate signup form on keyup and submit
        $("#deploymentUploadForm").validate({

            rules:{
                File: {
                    required: true,
                    accept: "zip"
                }
            },

            messages:{
                File: {
                    required: "This field is mandatory!",
                    accept: "Accepts only zip file!"
                }
            }  

        });

    });
</script>

HTML

<form action="~/Deployment/FileUpload" name="deploymentUploadForm" id="deploymentUploadForm" enctype="multipart/form-data" method="post">
   <h1>Deployment</h1>
   <p>
       <input type="file" name="File" accept="application/zip">
   </p>
   <div role="button" class="marginTop50 marginBottom">
     <p>
       <input type="submit" id="getDeploymentList" value="Upload" class="active" >  
     </p>
   </div>
</form>

OnSubmit JQUERY

$("#getDeploymentList").click(function () {
    if ($("#deploymentUploadForm").valid()) {

        $("#deploymentUploadForm").submit();
        $('#stepSummary').empty();
        $.loader({
            className: "blue-with-image",
            content: 'Please wait...Your request is being processed!'
        });

    };
});

Please let me know if you need any other info.

Thanks in adavace!

5
  • 1
    @TusharGupta: no, they are the same, as is even $(function)...
    – dandavis
    Sep 23, 2013 at 16:27
  • @dandavis oh sorry i got it Sep 23, 2013 at 16:28
  • You fiddle works fine in Chrome 29 on OS X. Which IE are you testing? As the validation uses the HTML5 file API, it will fail in IE9 and below, see. Sep 23, 2013 at 16:33
  • Strange! I'am using the same "Chrome Version 29.0.1547.66 m" and IE 10, but still only the file type validation not working! I am including the screenshot too in my Question!
    – UID
    Sep 23, 2013 at 16:41
  • Note that the documentation claims that accept uses MIME types, while zip is not a MIME type. (That said, on my Mac Chrome just filters the Select File dialog for .zip file name extensions, and disables ZIP files that don't have that extension, when using your Fiddle. That's not very nice, but might suit your needs.)
    – Arjan
    Sep 23, 2013 at 16:52

2 Answers 2

6

try with(HTML):

<input id="fileSelect" type="file" accept=".zip,application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed" />

jQuery( validation )

accept: "application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"

and with jQuery plugin( idea ):

(function( $ )
{
    $.fn.acceptFileType=function( types )
    {
        if ( types == undefined )
        {
            return true;
        }else{
            types = types.split(",")
        }
        this.each(function(){
            $( this ).bind("change",function()
            {
                if( !$.inArray( $( this ).val().replace(/([\d\w.]+)(\.[a-z0-9]+)/i,'\2') , types ) )
                {
                    $( this ).val('');
                    return false;
                }
                return true;
            });
        });
    };
})( jQuery );
$( ":file" ).acceptFileType(".zip");

And if you have a PHP, see this repo

https://github.com/erlandsen/upload

Good Luck!

1
  • Thanks! I just changed the "accept: 'application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"' and it worked.. Thanks a ton!
    – UID
    Sep 23, 2013 at 17:56
3

I was able to get the fiddle to work by changing your accept rule from zip to the following:

accept: "application/zip,application/octet-stream,application/x-zip,application/x-zip-compressed"

It looks like Firefox uses a different MIME type for the zip files than IE or Chrome. This uses a broader list of MIME types for zip files. You will need to decide if it is too broad for your purposes.

1
  • Thanks! I just changed the "accept: 'application/octet-stream,application/zip,application/x-zip,application/x-zip-compressed"' and it worked.. Thanks a ton!
    – UID
    Sep 23, 2013 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.