How to validate input file with jquery validation?

Question

I’m trying to validate a input of the kind file with Jquery Validation.

Following the documentation, I do the following: My input:

<input class="form-control" id="ImagemUpload" name="ImagemUpload" type="file" value="">

and my script:

         $("#ImagemUpload").rules("add", {
                accept: "image/jpeg, image/pjpeg",
                messages: {
                    accept: "Formato inválido."
                }
            });

However, it is not validating and the following message is showing up on the console:

Uncaught Typeerror: Cannot read Property 'call' of Undefined

Answer 1

I’ve been reading the documentation and found no error in your code.

What I found is that you need an extra file in addition to jquery.validate.js that I found in one of the website’s demos.

It is also important to remember that this code of yours has to come after you have started the .validate().

There’s a demo working. Note that you need jQuery, jquery.validate.js and Additional-methods.js.

$('#form').validate();
$('#ImagemUpload').rules('add', {
    accept: "image/jpeg, image/pjpeg",
    messages: {
        accept: "Formato inválido."
    }
});

jsFiddle: http://jsfiddle.net/pd08qtzL/