JavaScript:入力チェックを行ってから確認画面へ遷移する

Question

前提・実現したいこと

Java、Oracle、HTML/CSS、サーブレット/JSP、JavaScriptを勉強中です。
現在、課題で社員管理システムを作っています。

新しく社員情報を登録する際に、登録確認画面に遷移する前に入力チェックを行いたいのですが、ここで躓いています。
*入力エラーがある場合→確認画面へ遷移せずエラーメッセージを表示させる
*入力エラーがない場合→確認画面へ遷移する

1ヶ月程前に勉強をはじめたばかりで知識不足ですが、ご教示お願いします。

発生している問題・エラーメッセージ

JavaScript(jQuery)を使用して入力チェックを行っています。
エラーメッセージは出力されるようになりましたが、登録ボタンを押しても次のサーブレットに遷移しなくなってしまいました。

該当のソースコード

<form action="<%=request.getContextPath()%>/RegistCheck"
					method="post"  onsubmit="return input_check();" class="regist_input">

					<table class="emp_form">
						<tr>
							<th class="label">パスワード：</th>
							<td class="input"><input type="password" id="emp_pass"
								name="emp_pass"><br /><span id="emp_pass_error"
								class="error_m"></span></td>
						</tr>
						<tr>
							<th class="label">社員名：</th>
							<td class="input"><input type="text" id="emp_name"
								name="emp_name"><br /><span id="emp_name_error"
								class="error_m"></span></td>
						</tr>
						<tr>
							<th class="label">性別：</th>
							<td class="input"><label><input type="radio"
									name="gender" value="1" checked="checked" />男性</label>&emsp;<label><input
									type="radio" name="gender" value="2" />女性</label></td>
						</tr>
						<tr>
							<th class="label">住所：</th>
							<td class="input"><input type="text" id="address"
								name="address"><br /><span id="address_error" class="error_m"></span>
							</td>
						</tr>
						<tr>
							<th class="label">生年月日：</th>
							<td class="input"><input type="date" id="birthday"
								name="birthday">
								<br /><span id="birthday_error"
								class="error_m"></span></td>
						</tr>
						<tr>
							<th class="label">権限：</th>
							<td class="input"><label><input type="radio"
									name="authority" value="1" checked="checked" />一般</label>&emsp;<label><input
									type="radio" name="authority" value="2" />管理者</label></td>
						</tr>
						<tr>
							<th class="label">部署名：</th>
							<td class="input"><select name="dept_id">
									<option value="1">営業部</option>
									<option value="2">経理部</option>
									<option value="3">総務部</option>
							</select></td>
						</tr>
					</table>
					<input type="submit" value="登録"/>
				</form>

// 入力内容チェックのための関数
	function input_check(){
	var result = true;

	// エラー用装飾のためのクラスリセット
	$('#emp_pass').removeClass("inp_error");
	$('#emp_name').removeClass("inp_error");
	$('#address').removeClass("inp_error");
	$('#birthday').removeClass("inp_error");


	// 入力エラー文をリセット
	$("#emp_pass_error").empty();
	$("#emp_name_error").empty();
	$("#address_error").empty();
	$("#birthday_error").empty();

	// 入力内容セット
	var emp_pass   = $("#emp_pass").val();
	var emp_name  = $("#emp_name").val();
	var address = $("#address").val();
	var birthday  = $("#birthday").val();

	// 入力内容チェック

	// パスワード
	if(emp_pass == ""){
		$("#emp_pass_error").html("* パスワードを入力してください。");
		$("#emp_pass").addClass("inp_error");
		result = false;
	}else if(emp_pass.length > 16){
		$("#emp_pass_error").html("* パスワードは16文字以内で入力してください。");
		$("#emp_pass").addClass("inp_error");
		result = false;
	}
	// 社員名
	if(emp_name == ""){
		$("#emp_name_error").html("* 社員名を入力してください。");
		$("#emp_name").addClass("inp_error");
		result = false;
	}else if(emp_name.length > 30){
		$("#emp_name_error").html("* 社員名は30文字以内で入力してください。");
		$("#emp_name").addClass("inp_error");
		result = false;
	}

	// 住所
	if(address == ""){
		$("#address_error").html("* 住所を入力してください。");
		$("#address").addClass("inp_error");
		result = false;
	}else if(address.length > 60){
		$("#address_error").html("* 住所は60文字以内で入力してください。");
		$("#address").addClass("inp_error");
		result = false;
	}
	// 生年月日
	if(birthday == ""){
		$("#birthday_error").html("* 生年月日を入力してください。");
		$("#birthday").addClass("inp_error");
		result = false;
	}
	return false;
}

Answer 1

onsubmit="return input_check();"

ふむふむ、確かにonsubmitはreturn falseにしたらサブミットを中断するからね。
きっとinput_checkで入力が全て正しい場合のみreturn trueになってサブミットが走る作りになってるんだろうな。

var result = true;

なるほど、こうしてるのね。
つまり最後の行でreturn result;って書いてるんだろうな。

return false;

は？resultどこいった。

…というわけでケアレスミスです。
これをreturn result;にしましょう。
細部は見てないので全て意図通りになる保証はありませんが、大きく前進すると思います。

Comments

[chaton]

miyabi-sunさんのコメントで解決しました！
確かにケアレスミスでしたm(_ _)m
ご丁寧な回答ありがとうございました。

Answer 2

こんにちは

ぱっと見で、「ここが怪しいのでは？」と思う点は、 function input_check(){ の最後の行が

修正前：

return false;

になっていることです。これを

修正後：

return result;

にしてみるといかがでしょう？

補足

このような input_check() を書く場合には、まず初めに

function input_check(){
    var result = true;
    
    // TODO: ここで入力値のバリデーションを行う

    return result;
}

と書いてしまって、上記の状態で登録ボタンをクリックすればフォームがsubmit されて、サーブレットにリクエストが投げられることを、まず確認します。その後、 // TODO のところに result に false を入れるロジックを追加していくという手順で進めていけば、よいかと思います。

それと、入力エラーがあったときは、「CSSクラスに inp_error を持つ要素が1つ以上ある」という条件が成り立つならば、 ご質問にあるコードから result を削除してしまって、最後の return を

return $('.inp_error').length === 0;

とするのも検討してみて頂きたいリファクタ案です。 result のようなtrueかfalseの入っている変数のことをフラグといったりしますが、フラグを一つ増やすたびに、コードを追ってロジックを把握するのが大変になってきます。

Answer 3

input_check()で必ずfalseを返しているからでは？

---

社内課題であればなるべく社内の人に聞いたほうが良いです。
社内の人に聞いたほうが良い理由としては

• 仕様を把握しているのでついでに間違えてるところを指摘してもらえる
• 対面の利点を十分に生かして教えてもらえる
• 社内秘情報が漏れることがない

などです。
※ただし聞く人によってはそういう利点が必ずあるわけではないので注意