How can I add validate dimension in pixels with jquery validate?

Question

My jquery validate like this :

store: {
    rules: {
        banner: {
            required: true
        }
    },
    messages: {
        banner: 'The banner must be filled',
    },
    errorElement: 'span',
    errorPlacement: errorPlacement,
    highlight: highlight,
    unhighlight: unhighlight
},

If user not upload banner with dimension 1170 x 300 pixels there exist message like this :

Please upload an image with 1170 x 300 pixels dimension

How can I do it?

By using `jQuery.validator.addMethod` and do pixels checking. — i3lai3la, Nov 29 '17 at 07:50

bipin patel · Accepted Answer · 2017-11-30T06:21:05.993

5

You need to create your custom validation method

$.validator.addMethod('dimention', function(value, element, param) {
    if(element.files.length == 0){
        return true; <--- check here if file not added than return true for not check file dimention
    }
    var width = $(element).data('imageWidth');
    var height = $(element).data('imageHeight');
    if(width == param[0] && height == param[1]){
        return true;
    }else{
        return false;
    }
},'Please upload an image with 1170 x 300 pixels dimension');

And you need to set parameter imageWidth and imageHeight at image change like this

// files is id of your input

<input type="file" id="files" name="name" />

$('#files').change(function() {
    $('#files').removeData('imageWidth');
    $('#files').removeData('imageHeight');
    var file = this.files[0];
    var tmpImg = new Image();
    tmpImg.src=window.URL.createObjectURL( file ); 
    tmpImg.onload = function() {
        width = tmpImg.naturalWidth,
        height = tmpImg.naturalHeight;
        $('#files').data('imageWidth', width);
        $('#files').data('imageHeight', height);
    }
});

and call like this

rules: {
    banner: {
        dimention:[1170,300]
    }
}

Working fiddle link fiddle link

edited Nov 30 '17 at 06:21

answered Nov 29 '17 at 07:53

bipin patel

2,061
1
13
22

There exist error : `Uncaught TypeError: Cannot read property '0' of undefined. Exception occured when checking element, check the 'dimention' method` – moses toh Nov 29 '17 at 09:23
I have change my answer you can do like that it's working perfectly with your requirements – bipin patel Nov 29 '17 at 11:20
Great. It works. Thanks – moses toh Nov 29 '17 at 14:52
I want to ask. How to make the banner not required? – moses toh Nov 29 '17 at 21:27
I have update my answer remove require and check in dimention method if file added than check for dimention – bipin patel Nov 30 '17 at 06:21
Okay. Thanks a lot – moses toh Nov 30 '17 at 08:08
Not working in jquery/2.1.1 version. can you help me out. – Mitul Marsoniya Sep 26 '22 at 07:55

How can I add validate dimension in pixels with jquery validate?

1 Answers1