jQuery Validator Does Not Validate Input File Type

Question

I've written a upload form and I want users to be able to upload only images. I've decided to use jQuery validator in order to make sure that users cannot send an empty form an can only upload images. So far, users indeed can't send an empty form, but they can upload and file they would like to , even if it's not an image. Here's the code of jsFunc.js which aim to handle this problem:

$(document).ready(function () {
$('#upload-image').validate({
    errorElement : "span",
    errorPlacement: function(error, element) {
        error.appendTo(".upload-error");
    },
    rules: {
        pic: {
            required: true,
            accept: "image/*"
        }
    }
});
});

Here are the files included in the page that included the upload form :

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="sys/jsFunc.js"></script>
<script type="text/javascript" src="sys/additional-methods.js"></script>
<script type="text/javascript" src="sys/jquery.validate.js"></script>

What is wrong with the code above? I'd be grateful if anyone could point me to the problem.

@ArunPJohny , thanks , I've also checked it using jsfiddle and that's why it seems strange. I've not edited the post and included the files i'm importing, maybe something it wrong / missing ? — user975343
– user975343, Commented May 9, 2013 at 6:53
The order of imports is wrong jquery.validate.js first then additional-methods.js — Arun P Johny
– Arun P Johny, Commented May 9, 2013 at 6:57

Arun P Johny · Accepted Answer · 2013-05-09 06:58:32Z

1

The order of script file imports is wrong, jquery.validate.js first then additional-methods.js

<script type="text/javascript" src="sys/jquery.validate.js"></script>
<script type="text/javascript" src="sys/additional-methods.js"></script>

answered May 9, 2013 at 6:58

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user975343 Over a year ago

First of all , thanks for the answer ! I'd like to know please why there is any importance for the order of file importing ?

Arun P Johny Over a year ago

because the additional-methods files uses features included in the validate.js file. so when the additional-methods file is executed it expects the validate.js file to be already executed

Raji · Accepted Answer · 2013-05-09 06:46:20Z

1

If you're trying to validate by file extension or to accept only images with certain extension you can use like this

rules: {
   field: {
     required: true,
     extension: "jpeg|png"
   }
}

See: http://docs.jquery.com/Plugins/Validation/CustomMethods/extension#extension

answered May 9, 2013 at 6:46

Raji

8451 gold badge14 silver badges22 bronze badges

2 Comments

Raji Over a year ago

Could you please share jsfiddle for it?

George Over a year ago

Please how would you collect the values of the file field and the text field into another page after validating them

Dmitriy · Accepted Answer · 2015-04-06 15:45:03Z

0

rules: {
   field: {
     required: true,
     accept: "jpeg|png"
   }
}

Replace extension with accept, it 'll work

edited Apr 6, 2015 at 15:45

Dmitriy

5,58512 gold badges27 silver badges39 bronze badges

answered Apr 6, 2015 at 15:22

Nazeef Ila Ahmad

431 silver badge5 bronze badges

Collectives™ on Stack Overflow

jQuery Validator Does Not Validate Input File Type

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related