jquery input file validation

Question

i have validate an input file but i have a problem when a rules is only work with required rules and not with accept rules and filesize rules, here my code

$('#myform').validate({
    rules: { image: { required: true, accept: "bmp", filesize: 1048576  }},
    messages: { image:{ required: "insert image", accept: "must in jpg,png and bimp format", filesize: "less than 1MB"  }}
});

when i dont insert an image a validation is work, a message error occurs, but when i insert an image not in bmp format or image size more than 1MB a validation is not work

please help me..

thanks..

Answer 1

You can add a validation method for that

$.validator.addMethod("uploadFile", function (val, element) {
    var ext = $(element).val().split('.').pop().toLowerCase();
    var allow = new Array('bmp');
    var size = element.files[0].size;

    if (jQuery.inArray(ext, allow) == -1 || size > 1048576) {
        return false
    } else {
        return true
    }

}, "Invalid file");

And Use it like this -

rules: {
    image: {
       required: true,
       uploadFile:true
    }
}

Demo --> http://jsfiddle.net/pEnDY/2/