自定义JS验证无法正常工作

Question

The following validation validates the code properly and gives the alerts.. But once you close the alert and want to continue you can't because it refreshes itself, I don't want the page to get refreshed just showing the alerts and letting the user edit their info:

http://jsfiddle.net/PKLQn/114/

HTML:

<form name="fff1" onsubmit="return newfuncion();">
    <input type="text" id="email" />
    <input type="text" id="title" />
    <input type="text" id="url" /><br><br>
    <input type="file" id="flUpload" /><br/><br>
    <input type="submit" value="CONTINUE" />
</form>

JAVASCRIPT:

function Checkfiles() {
    var fup = document.getElementById('flUpload');
    var fileName = fup.value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    var chkext = ext.toLowerCase();
    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") {
        return true;
    }
    else { return false; }
} // Checfiles

function Checksize() { 
    var iSize = ($("#flUpload")[0].files[0].size / 1024);
    alert(iSize);
        if(Checkfiles()==true) {
            alert("Checkfiles function works properly!");
            if (iSize < 2097152.00) { 
                alert("It's smaller than 2 megabytes, proceed..");
                return true;
            }
            else{
                alert("It's bigger than 2mb, submit an smaller file!");
                return false;
            }
        } else { alert("Upload GIF, PNG, JPG Images only"); return false; }
} //Checksize

function Checkfields() {
    var error="";
    // Validate Email
    var email = $("#email").val();
    if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { } else { error += "- Please enter a valid email address.\n"; }
    // Validate Title
    var title = $("#title").val();
    if (title=="" || title==null) { error += "- Please enter a valid title for your advertisement.\n"; }    
    // Validate URL
    var url = $("#url").val();
    if (/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/.test(url)) { } else { error += "- Please enter a valid URL."; }

    if(error!=""){alert(error); return false;} else {return true;}
}// Checkfields

function newfuncion() {
        var fields = Checkfields();
        var size = Checksize();
        var files = Checkfiles();
        if(fields==true && size==true && files==true) {
            alert("Code works, now proceed to .php page!");
            return true;
        } else {
            alert("Something's wrong, check your code!");
            return false;
        }
} // Use all functions

Any wonder what's wrong? Thanks in advance.

Answer 1

There's an error in your Javascript:

var iSize = ($("#flUpload")[0].files[0].size / 1024);

If there's no file, you will get an error while accessing the size property.

You need to do a check first:

var iSize;
if ($("#flUpload")[0].files[0]){
    iSize = ($("#flUpload")[0].files[0].size / 1024);
}