jQuery validator not working for file input type

Question

I am trying to implemenet validation for file input type using jQuery validator plugin. The file input type should accept only images with .jpeg, .jpg & .png extension & file size should not be greater than 1MB. Validation for other input fields work without any issues. Required validation works for file input type.

What could be the issue?

Javascript

jQuery.validator.addMethod('filesize', function(value, element, param) {
   return this.optional(element) || (element.files[0].size <= param) 
});    

$('#form').validate({
        rules: {
            firstname: {
                minlength: 6,
                required: true
            },
            lastname: {
                minlength: 6,
                required: true
            },
            file: {
                required: true, 
                accept: "png|jpeg|jpg",
                filesize: 1048576 
            }
        },
        messages: 
           { 
            file: "File must be JPEG or PNG, less than 1MB" 
           },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

HTML

<form id="form">
    <div class="form-group">
        <label class="control-label" for="firstname">First:</label>
        <div class="input-group">
            <input class="form-control"  name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Last:</label>
        <div class="input-group">
            <input class="form-control" name="lastname" type="text" />
        </div>
    </div>

        <div class="form-group">
        <label class="control-label" for="file">Image:</label>
        <div class="input-group">
            <input  id="file" name="file" type="file" />
        </div>
    </div>


        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Fiddle that doesn't give desired result

"...should accept only images with .jpeg, .jpg & .png extension" ~ The accept rule is only for MIME types. The extension rule is for file extensions. You also need to include the additional-methods.js file for these rules. — Sparky
– Sparky, Commented Jun 4, 2015 at 17:44

Sparky · Accepted Answer · 2015-06-04 17:57:30Z

6

...should accept only images with .jpeg, .jpg & .png extension

The accept rule is only for MIME types. The extension rule is for file extensions. Looks like you should be using the extension rule instead of accept. You also need to include the additional-methods.js file in order to use these rules.
In order to have access to the file's size property, you need to set the enctype="multipart/form-data" attribute on the <form> tag.

Working DEMO: http://jsfiddle.net/mv8w3m0c/1/

edited Jun 4, 2015 at 17:57

answered Jun 4, 2015 at 17:51

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

jQuery validator not working for file input type

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related