JavaサーブレットでJavaScriptのアラートを使いたい

Java初心者のためおかしなところが多いと思いますがご容赦くださいませ。

Javaサーブレットのみを使って、以下の機能を実装したプログラムを書く課題に苦戦しております。
どうすれば課題通りに動くのか教えてください。

前提・実現したいこと

・テキストボックスと送信ボタンの表示
・送信すると入力された内容が下部に表示される
・送信されるたびに文字列は下に追加される
・未入力のまま送信ボタンが押下されるとアラートボックス(JavaScript)が表示され、送信処理が中止される

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

・ページを開くたびに"null"という文字がテキストボックス下部に表示される
（doGetしてnullを受け取る前にアラートを出したい）
・そもそもアラートが出てくれない
（htmlをサーブレットに書くときはこのような書き方をしていたのですが、
JavaScriptを書くときは違いますか？）
・未入力で送信することができてしまう

該当のソースコード

Java
1
2import java.io.IOException;
3import java.io.PrintWriter;
4
5import javax.servlet.ServletException;
6import javax.servlet.annotation.WebServlet;
7import javax.servlet.http.HttpServlet;
8import javax.servlet.http.HttpServletRequest;
9import javax.servlet.http.HttpServletResponse;
10import javax.servlet.http.HttpSession;
11
12import java.util.ArrayList;
13
14@WebServlet(urlPatterns={"/book/TextTest"})
15@SuppressWarnings("unchecked")
16public class TextTest extends HttpServlet
17{
18	public void doGet(HttpServletRequest req, HttpServletResponse res)
19	throws ServletException, IOException
20	{
21		res.setContentType("text/html; chrset=UTF-8");
22		PrintWriter out = res.getWriter();
23		ArrayList<String> list;
24
25		// セッションから入力されたことのあるデータを取得
26		HttpSession session = req.getSession();
27		list = (ArrayList<String>)session.getAttribute("word");
28		
29		// データが空の場合は新しくインスタンスを作成
30		if(list == null)
31		{
32			list = new ArrayList<String>();
33			session.setAttribute("word", list);
34		}
35		
36		// テキストボックスからデータを取得し、文字列をlistに追加
37		String data = req.getParameter("data");
38		list.add(data);
39		
40		// テキストが空の場合はアラートを表示
41		out.println("<html><head>");
42		out.println("<script type=\"text/javascript\">");
43		out.println("<!--");
44		out.println("function check(){");
45		out.println("if(document.getElementsByName(\"data\").value.length == 0){");
46		out.println("alert(\"テキストボックスが空です。\")");
47		out.println("}");
48		out.println("//-->");
49		out.println("</script></head><body>");
50		
51		// テキストボックスの表示
52		out.println("<form action=\"TextTest\" method=\"get\" name=\"box\">");
53		out.println("<input type=\"text\" name=\"data\">");
54		out.println("<input type=\"submit\" onClick=\"check()\">");
55		out.println("</form><br><hr>");
56		
57		if(list.size() != 0)
58		{
59			// リストの中身をすべて出力
60			for(int i = 0; i < list.size(); i++)
61			{
62				out.println(list.get(i) + "<br>");
63			}
64		}
65		out.println("</body></html>");
66	}
67}
68

試したこと

JavaScriptで未入力を判定できる方法を調べました。
ネットでいろんな記事を見ながら書いたのでぐちゃぐちゃになっていると思います……
大変見にくく申し訳ありませんが、ヒントだけでもいただけると助かります。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

画面に表示されたHTMLをブラウザの「ソースを表示」で確認してみてください。
それがある意味「ヒント」になるはずです。

あとはそのHTMLを.htmlで保存してブラウザにドロップして実行してみて想定の動きをするか、ですね。
本来は先にモックと言う形でHTMLを作成し、JavaやJSPで作るHTMLにてその形を目指します。

投稿2020/05/12 03:41

m.ts10806

総合スコア80875

pi01496

2020/05/12 07:51

ご回答ありがとうございます。ソースを表示してみたところ、アラートで表示させる日本語が文字化けしていることとalert()の後にセミコロンがないことはわかりました。まず<script type="text/javascript" charset="uft-8">として文字コードをセットしてみましたが、文字化けは修正されませんでした。 utf-8なのに日本語にならないのはどこが間違っているのでしょうか？また、function Check()内のif()の条件式で対象が絞り込めていないのかと思い、if(document.box.data.value == \"\")に変えてみましたが、何も変わりませんでした。方向性はあっていますでしょうか？もしくはそれ以外の問題でしょうか？たくさん質問してしまい恐縮ですが、お付き合いいただけますと幸いです。

pi01496

2020/05/12 08:09

解決いたしました。ご回答ありがとうございました。