jQuery Validation Plugin custom method always return invalid

Question

please help to find out issue with my jquery validation. I am using jQuery Validation plugin for validate my form. I have added a custom rule for check dimension of an image(trying to upload image). Here is code for custom method

$.validator.addMethod('checkDim', function (value, element, param) {     
    var image = new Image();
    var file = element.files[0];
    var _URL = window.URL || window.webkitURL;
    image.src = _URL.createObjectURL(file);
    image.onload = function () {
        console.log("The image width is " + this.width + " and image height is " + this.height);
        if(this.width == param[0] && this.height == param[1]){ 
            return true;
        }
        else{            
            return false;
        }
    };  

}, 'Image dimension must be as specified');

I have added a rule like below

image: {required: true, accept: "image/*", checkDim: [1366,311]}

function is called correctly as i can see message in console and also dimension is also calculate correctly but this function always return invalid.

Please help me to figure out what i am doing wrong.

Also log the param[0] and param[1] to see what is in and why its returning false. — Dhaval Purohit, Jun 21 '16 at 05:43
check my answer http://stackoverflow.com/questions/29746285/function-returns-the-value-before-jquery-image-load-is-executed/41062902#41062902 — shafiq.rst, Dec 09 '16 at 14:48

RIYAJ KHAN · Answer 1 · 2016-06-21T06:15:51.427

0

Your element parameter will gives attribute related to your element i.e. your image.You don;t need onload event or need to create Image Object.

$.validator.addMethod('checkDim', function(value, element, param) {
        var width = $(element).width();
        var height = $(element).height();
        console.log("The image width is " + width + " and image height is " + height);
        if (width == param[0] && height == param[1]) {
            return true;
        } else {
            return false;
        }
    }, 'Image dimension must be as specified');

edited Jun 21 '16 at 06:15

answered Jun 21 '16 at 05:45

RIYAJ KHAN

15,032
5
31
53

Riyaj it's not working, showing undefined width and height – Karan Jun 21 '16 at 06:13
@Karan please check updated one. – RIYAJ KHAN Jun 21 '16 at 06:16
@RIYAZ KHAN seems i have not explain properly. I am trying to upload an image. your method is returning height and width of element, not image that i have selected. – Karan Jun 21 '16 at 06:20

jQuery Validation Plugin custom method always return invalid

1 Answers1