ファイルアップロードのバリデーションをsubmitで制御したい

Question

前提・実現したいこと

お問い合わせフォームで画像ファイルのアップロード時に容量と拡張子でバリデーションをし、submitでエラー時に先に進めないようにしたいのですが、エラーは表示するのですが、submitが制御できせん。
jqueryのスコープの理解ができていなく、「var result」の値がうまく行っていないと思うのですが、教えていただけないでしょうか。

ソース

<form action="carbon_confirm.html" method="post" id="form-name">
    <div class="form__main__list">
        <dl>
            <dt><p class="icon--req">画像の添付</p></dt>
            <dd class="formType--file">
                <div class="upLoad--btn">ファイルを選択
                    <input type="file" name="画像の添付" id="file" onchange="uv.style.display='inline-block'; uv.value = this.value;">
                </div>
                <div class="upLoad--value">
                    <input type="text" id="uv" class="uploadValue" disabled value="選択されていません"/>
                </div>
            </dd>
        </dl>
        <div class="form__main__list__note" id="file__note">
            <p>データ形式 ： jpg / psd / ai</p>
            <p>データサイズ ： 5MB以下</p>
        </div>
        <div class="fileError--size">※ データサイズは5MB以下にしてください</div>
        <div class="fileError--name">※ データ形式をご確認ください</div>                    
    </div>

    <div class="form__main__btn">
        <span><input type="submit" value="入力内容を確認する"></span>                    
    </div>
</form>

$(function(){
    var result = true;
    
	$('input:submit').click(function(){
		if(!result == true){
			return false;
		}
	});
    
    $('#file').bind('change', function() {
        var imgSize = this.files[0].size;
        var imgName = this.files[0].name;
        console.log(imgSize);
        if(imgSize >= 5242880){ //5MB: 5242880
            $(".fileError--size").addClass("checked");  
            return false;
        }else{
            $(".fileError--size").removeClass("checked"); 
        }
        if (!imgName.match(/.(jpg|psd|ai)$/i)){
            $(".fileError--name").addClass("checked"); 
            return false;
        }
    });    
    return result;
});    

.fileError--name,
.fileError--size{
    width: auto;
    min-width: 120px;
    padding: 7px 13px 7px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #ee0101; 
    display: none;
}
.fileError--name.checked,
.fileError--size.checked{
    display: inline-block;
}

Comments

[kyoya0819]

jQueryではやらないほうがいいと思いますが？
わかる人が見れば制限以上のものをアップロードできてしまいます。

[mccandless]

ご連絡ありがとうございます。通常はPHP等で処理した方が良いと思いますが、今回必要に迫られてのご質問になります。

Answer 1

こういうことかな。

    $('#file').bind('change', function() {
        var imgSize = this.files[0].size;
        var imgName = this.files[0].name;
        console.log(imgSize);
        if(imgSize >= 5242880){ //5MB: 5242880
            $(".fileError--size").addClass("checked");  
            result = false;
        //  return false;
        }else{
            $(".fileError--size").removeClass("checked"); 
        }
        if (!imgName.match(/.(jpg|psd|ai)$/i)){
            $(".fileError--name").addClass("checked"); 
            result = false;
        //  return false;
        }
    });    
//    return result;

Comments

[mccandless]

ありがとうございます。上記を参考に「解決した方法」で解決しました。ありがとうございました。

Answer 2

$(function(){
$('#file').bind('change', function() {
imgSize = this.files[0].size;
imgName = this.files[0].name;
console.log(imgSize);
if(imgSize >= 5242880){ //5MB: 5242880
$(".fileError--size").addClass("checked");
error = 1;
return false;
}else{
$(".fileError--size").removeClass("checked");
error = 0;
}
if (!imgName.match(/.(jpg|psd|ai)$/i)){
$(".fileError--name").addClass("checked");
error = 1;
return false;
}else{
error = 0;
}
});

$('input:submit').click(function(){
       if(error === 1){
        return false;
	}
});

});