Jquery validate accept method - TypeError: Unable to read call property undefined

Question

I want to check the type of the downloaded file using the validate plugin.

But I got the following error message:

Uncaught TypeError: Cannot read property 'call' of undefined. Exception occurred when checking element file, check the 'accept' method. 

Here is my form.

 <form id="upload" enctype="multipart/form-data"> <div class="control-group"> <div class="controls"> <input id="file" name="file" type="file"> </div> <div class="form-group"> <button class="btn btn-primary" onclick="Submit()" type="button">Submit</button> </div> </div> </form> 

And here is my JavaScript:

 var Submit=function(){ var validator = $('#upload').validate({ rules:{ file: { required: true, accept: "audio/*, video/*" } }, message: { file:"Invalid file type" } }); validator.form(); } 

Answer 1

To use the "accept" method, you will need to add an additional jQuery Validate method file. Just add it after the confirmation file:

 <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 

Then try running your validator instead:

 $(document).ready(function(){ $("#upload").validate({ ...settings... }); }); 

And remove the onClick attribute and type="button" with the button.

Here are the docs:

http://jqueryvalidation.org/validate/

Answer 2

I had the same problem, but I got a solution. I added the code below to the script above jquery validation script

 $.validator.addMethod('filesize', function (value, element, param) { return this.optional(element) || (element.files[0].size <= param) }, 'File size must be less than {0}'); 

After that you need to add your own verification script

 var Submit=function(){ var validator = $('#upload').validate({ rules:{ file: { required: true, accept: "audio/*, video/*" } }, message: { file:"Invalid file type" } }); validator.form(); }