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

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

• javascript
• jquery
• jquery-validate

• I get a call error in the console – mplungjan Commented Jun 4, 2015 at 9:09
• 2 "...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 Commented Jun 4, 2015 at 17:44

1 Answer 1

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

1. 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.

2. 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/mv8w3m0c/1/