im uploading an image and trying to validate it before with jquery. Here is my code:
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
.
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.
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"
}
},
...
})
});