【jquery,js】入力バリデーションチェック [preventDefault,css,find] [js04_20210220] #JavaScript

処理の概要

送信ボタンを押下して、テキストボックスを入力されていない場合、バリデーションエラーを表示する

処理のフロー：

　(1)送信ボタンを押下
　(2)送信ボタンのイベントに紐ついて、入力ボックスの内容をチェックする
　(3)入力ボックスが一つでも空白があった場合は、エラーを赤文字で表示する

画像１

画像２

ソースコード

index.html

<body>
    <form method="GET" action="./index.html" target="_blank" id="mainForm">
        <font color="orange">バリデーションチェック</font><br><br>
        入力欄1<input type="text" name="t1" id="userText1" class="textBox" value=""><br>
        入力欄2<input type="text" name="t2" id="userText2" class="textBox" value=""><br>
        入力欄3<input type="text" name="t3" id="userText3" class="textBox" value=""><br>
        <input type="submit" id="submitButton" value="送信"><br>
        <div id="output"></div>
</body>

main.js

$(function() {
    $("#submitButton").click(function(e){
        var checkOk = true;

        $("#mainForm").find(".textBox").each(function(){
            if($(this).val() !== "") {
                $("#output").text("送信しました");
                //ボタンクリックイベントを成功とさせる
                return true
            }else{
                $("#output").text("テキストには全て入力して下さい");
                $("#output").css("color","red");
                //obj = document.getElementById("output");
                //obj.style.color = "red";

                //ボタンクリックイベントを失敗とさせる
                //return false
                e.preventDefault();
            }
        });
    });
});

ポイント

html：
(1)なし
js：
(1)クリックイベントの引数に”e”を設定して、そのイベントをpreventDefaultメソッドで処理する
（return falseでも可能）
(2)複数のオブジェクトにバリデーションをかけたい場合は、findの引数にclassを設定する
(3)バリデーションエラーは、cssメソッドを使って強調する
(4)入力ボックスの内容をeachメソッドに渡して、得られた配列の入力値をチェックする
(5)jsで、赤文字表示をする場合はstyleメソッドのcolorプロパティを使用する

参考資料

JavaScript(仕事の現場でサッと使える！デザイン教科書)　p180