Image Dimension Validation with jQuery Validation

Asked

Viewed 59 times

3

Even selecting an image in the correct dimensions is giving me error warning that I am not selecting an image in the right dimensions.

How do I return this function to not enter error ?

jQuery

$.validator.addMethod("validateimg", function(value, element, params){
    var img = new Image();
    var id  = element.id;
    img.src = window.URL.createObjectURL($('#'+id)[0].files[0]);

    img.onload  = function(){
        var w   = img.naturalWidth;
        var h   = img.naturalHeight;
        window.URL.revokeObjectURL(img.src);
        var boo = (w == params[0] && h == params[1]) ? true : false;
        return boo;
    }
});

$("#form-perfil").validate({
   ignore: [],
   errorLabelContainer      : "#error-box-content",
   wrapper                  : 'li',
   rules                    : {
       foto_perfil_admin    :{
          required          : true,
          extension         : "jpg|png",
          validateimg       : [160, 160]
       },
   },
   messages                 : {
        foto_perfil_admin   :{
        required        : 'Escolha uma foto de perfil',
        extension       : 'A foto de perfil do administrador deve ser JPG ou PNG',
        validateimg     : 'Selecione a imagem de perfil do administrador em 160 x 160',
   },
});

I believe it’s because of the variable boo be inside the onload().

And besides I have several image fields with the same validation and is giving problems, conflict...

  • you have already given a console.log for example in the values, w == params[0] && h == params[1] , to see if they are the same ?

  • Yes, I’ve debugged everything...

  • really is some problem in load, I’ll see if I can find the solution

  • take a look: http://stackoverflow.com/questions/33785017/naturalwidth-and-naturalheight-returns-0-using-onload-event

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.