jQuery prevent a form with errors from submitting

JavaScript
1

I have this file upload form where I check a files size and decide if it can be uploaded or not.

I’m using the jQuery form plugin to do the progress bar and upload. But I’m stuck integrating the two.

Actually, what needs to happen is (onchange and onclick), the file needs to be checked for size. If the size is ok the upload can be allowed, if not the upload cannot proceed.

Being a newcomer to javascript and all this jquery stuff, I can’t seem to figure out how to get this done right. I’ve messed thing up and i’m getting funny results.

I’ve done the file size verification part from another question here. How do I do the rest?

My code is pretty simple. Can you please help?

<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
    <h1>File Upload Progress Demo #1</h1>
    <code><input type="file" name="myfile"></code>
        <form enctype="multipart/form-data" method="">
        <input type="file" name="myfile" class="myFile"><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

<script src="jQuery.js"></script>
<script src="jquery.form.js"></script>
<script>
$(document).ready(function() {

$('input:file').on('click change',
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            var n = files[i].name,
                s = files[i].size,
                t = files[i].type;

            if (s > 100) {
                console.log('Please deselect this file: "' + n + '," it\\'s larger than the maximum filesize allowed. Sorry!');
                e.preventDefault();
            }else
            {
                var bar = $('.bar');
                var percent = $('.percent');
                var status = $('#status');

                $('form').ajaxForm({
                    url:"upload.php",
                    type:"post",
                    dataType:"json",
                    target:"#status",

                    beforeSend: function() {
                        status.empty();
                        var percentVal = '0%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    complete: function(xhr) {
                        status.html(xhr.responseText);
                    }
                });


            }
        }
    });
});
</script>