Jquery提交按钮提交不起作用

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);
        }
    });
});

上述jquery代码用于验证上传文件的大小、上传图像的宽度和高度尺寸。当上传错误大小以及错误宽度和高度尺寸的文件时，上述脚本将起作用。但是，当上传错误大小、错误宽度和错误高度的文件时，单击提交按钮后，会提交错误大小、错误高度和错误宽度的文件。我已经使用了 Preventdefault 但它不起作用。有人可以帮忙吗？

<?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(); ?>

以上代码用于提交注册表。 jquery 已为此注册表单编写。

谁能告诉我如何解决这个问题？

Answer 1

从处理程序返回 false 毫无意义且毫无意义，没有任何作用。

您应该设置一些全局标志，并在表单提交处理程序中检查该标志:

$(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();
       }
    });
});