処理の概要
送信ボタンを押下して、テキストボックスを入力されていない場合、バリデーションエラーを表示する
処理のフロー：
(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