Jquery Submit button Submission not working

Question

$(document).ready(function () {
    $('.upld').bind('change', function () {
        var size = this.files[0].size;
        if (size > 1048576) {
            $('.file_upload_error').fadeIn(200).delay(5000).fadeOut();
            return false;
        }
    });

    //logo width and height check 
    $('.test').bind('change', function () {
        if (file = this.files[0]) {
            img = new Image();
            img.onload = function () {
                //alert("Width and height" + this.width+this.height);
                if (this.width != 337 && this.height != 111) {
                    $('.logo_upload_error').fadeIn(200).delay(5000).fadeOut();
                    return false;
                }
            };
            img.src = window.URL.createObjectURL(file);
        }
    });

    $("#vendor_registerationfrm").submit(function(e){
    e.preventDefault();
    });

    //banner width and height check 
    $('.banner').bind('change', function () {
        if (file = this.files[0]) {
            img = new Image();
            img.onload = function () {
                //alert("Width and height" + this.width+this.height);
                if (this.width != 1423 && this.height != 249) {
                    $('.banner_upload_error').fadeIn(200).delay(5000).fadeOut();
                    return false;
                }
            };
            img.src = window.URL.createObjectURL(file);
        }
    });
});

The above jquery code is used for validating the size of file which is uploaded, width and height dimensions of an image which is being uploaded. The above script is working when file of wrong size and wrong width and height dimensions is being uploaded. But when file of wrong size and wrong width and wrong height is uploaded, on clicking the submit button it is getting submitted with files of wrong size and wrong height and wrong width. I have used preventdefault but it is not working . Can anyone help ?

<?php echo form_open_multipart(base_url() . 'crm/vendor_add_action', array('id' => 'vendor_registerationfrm')); ?>

<!-- ... -->

<div class="box-footer">
<input type="hidden" name="form_token" value="<?php echo                 $this->session->userdata('form_token'); ?>" />
<button type="submit" class="btn btn-primary">Submit</button>
</div>

</div>

</div><!-- /.box-header -->

<!-- form start -->
<?php echo form_close(); ?>

The above code is for submitting the registration form. The jquery has been written for this registration form.

Can anyone tell me how to solv this problm ?

Answer 1

Returning false from the handlers is meaningless and pointless, it serves no purpose.

You should set some global flag, and in the form submit handler check that flag:

$(document).ready(function () {
    var _validImage = false;

    $('.upld').bind('change', function () {
        var size = this.files[0].size;
        if (size > 1048576) {
            $('.file_upload_error').fadeIn(200).delay(5000).fadeOut();
            _validImage = false;
        } else {
            _validImage = true;
        }
    });

    //logo width and height check 
    $('.test').bind('change', function () {
        if (file = this.files[0]) {
            img = new Image();
            img.onload = function () {
                //alert("Width and height" + this.width+this.height);
                if (this.width != 337 && this.height != 111) {
                    $('.logo_upload_error').fadeIn(200).delay(5000).fadeOut();
                    _validImage = false;
                } else {
                    _validImage = true;
                }
            };
            img.src = window.URL.createObjectURL(file);
        }
    });


    $("#vendor_registerationfrm").submit(function(e){
       if (!_validImage) {
            //image is invalid, don't submit
            e.preventDefault();
       }
    });
});