8

im uploading an image and trying to validate it before with jquery. Here is my code:

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $("#form").validate({
        errorLabelContainer: "#message_box", wrapper: "li",

        rules: {
            image: {required: true, accept: "jpg|jpeg|png|gif"}
        },
        messages: {
            image: {required: 'Required!', accept: 'Not an image!'}
        }
    })
});
</script>

Required is working - if i insert no image i get an error. But accept isn't working (anything i insert passes) and i cant figure out why. Any ideas? :)

Ejaz
  • 8,719
  • 3
  • 34
  • 49
user1985273
  • 1,817
  • 15
  • 50
  • 85
  • you don't need jQuery..seems like you are using 99.9% code you don't need just to make a simple test to see if a field is "required" and if the file type if valid..just do that. also, you can also check with JS if the file was an actual image or not - http://stackoverflow.com/q/71944/104380 also read this: http://stackoverflow.com/q/181214/104380 – vsync May 01 '13 at 16:28

3 Answers3

26

You need two things.

(1) use valid syntax for using accept method because it requires you to use to provide comma-separated list of mimetypes. 

$(document).ready(function(){
    $("#form").validate({
        errorLabelContainer: "#message_box", wrapper: "li",

        rules: {
            image: {required: true, accept: "image/jpg,image/jpeg,image/png,image/gif"}
        },
        messages: {
            image: {required: 'Required!', accept: 'Not an image!'}
        }
    })
});

(2) You'll have to include the additional-methods.js because the accept methods is not included in the core validate plugin. So add following to your <head> after you include validate plugin 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

Here's the link to jsfiddle. Note that it includes debug: true to prevent posting of the form in fiddle.

Ejaz
  • 8,719
  • 3
  • 34
  • 49
  • 2
    There is nothing wrong with this answer. However, the easiest fix is to change `accept` into `extension`. See [`extension`](http://docs.jquery.com/Plugins/Validation/CustomMethods/extension#extension) rule. – Sparky May 02 '13 at 03:34
  • jquery validation error "<>"...i get this error thanks for your answer ... – HaRsH Apr 23 '15 at 09:42
6

1) As already stated, you need to include the additional-methods.js file.

2) For file extensions, use the extension rule. The accept rule is for mime types.

$(document).ready(function(){

    $("#form").validate({
        errorLabelContainer: "#message_box", wrapper: "li",
        rules: {
            image: {
                required: true,
                extension: "jpg|jpeg|png|gif"
            }
        },
        ...
    })

});
Sparky
  • 98,165
  • 25
  • 199
  • 285
3

The documentation states that the accept rule only accepts mime-types as an argument.

If you wanted to accept all images then use image/*.

If you want to accept only specific image types then you can specify multiple mime-types by separating them with a comma, e.g. image/pjpeg,image/jpeg,image/png,image/gif.

David Hancock
  • 14,861
  • 4
  • 41
  • 44