JavaScriptを使用したバリテーションの実装メモ

メモ

出向先で実装するように言われたので実装しました。
JavaScriptを使用したバリテーションです。未選択の場合、アラートで対応しサブミットしません。値がセットされているときだけサブミットします。image ですがSmartyなどでissetで確認しテンプレートに非表示か否かで空を出すことでJavaScriptで認識させられます。今回はヌル値チェックだけですが正規表現でもいけそうです。

<form id='SendForm' action="ポスト先" method="post" enctype="multipart/form-data">
    <input id="text_1" type="text" name="text_1" size="25" maxlength="256" value="" />
    <input id="file_1" type="file" name="file_1">
    <image id="image_1" alt="" src="">

    <input id="register-button" type="button" value="登録" >
</form>

イベントドリブン箇所

$(document).ready(function(){
    //登録ボタンイベント
    $("#register-button").click(function(e) {
    var error = '';
    error = chkValidation();
        if(error == ''){
            e.preventDefault();
            $("#SendForm").submit();
        }else {
            alert(error);
        }
    });
});

バリテーション箇所

function chkValidation(){
    var error = '';

    var text_1 = document.getElementById("text_1").value;
    var file_1 = document.getElementById("file_1").value;
    var image_1 = document.getElementById("image_1").getAttribute('src');

    if(text_1 == ''){
        error = error + 'テキストが未入力です。\n';
    }
    if(file_1 == ''){
        error = error + 'ファイルが未選択です。\n';
    }
    if(image_1 == ''){
        error = error + '画像がセットされていません。\n';
    }

    return error;
}