jQuery フォーム内の必須項目の入力状況をみて送信ボタンを有効／無効にする方法

お問い合わせなど入力フォーム内に “required” がついた必須項目の入力状況をみて送信ボタンを有効／無効にする方法を書きます。

必須項目の状況をみて送信ボタンを有効／無効にする

jQueryコードサンプル

<script type="text/javascript">
(function($) {
    //指定要素を定義
    const target = '#addForm input:required'; 
    
    //キー操作、状態変化をトリガーに実行
    $(target).on('keydown keyup keypress change', function(){

        //判定用のフラグ
        let flag = true;

        //指定要素をループで１つずつ確認
        $(target).each(function(e) {
            if ($(target).eq(e).val() === "") {
                flag = false;
            }
        });

        //フラグをみてtrueなら送信ボタンを有効。falseなら無効にする
        if (flag) {
            //必須項目すべて入力済みであれば有効にする
            $('#submitBtn').removeClass("disabled");
        }
        else {
            //未入力など漏れがある場合は無効にする
            $('#submitBtn').addClass("disabled");
        }
    });

})(jQuery);
</script>

HTMLフォームサンプル

<form name="addForm " id="addForm " method="post" action="./">
    <input name="member_address[name]" type="text" placeholder="氏名" required>
    <input name="member_address[tel]" type="text" placeholder="電話番号" required>
    <a href="javascript:addForm.submit()" class="btn disabled" id="submitBtn">送信する</a>
</form>