質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

11349閲覧

javascriptでエラーを出力したい。

退会済みユーザー

退会済みユーザー

総合スコア0

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/07/05 04:56

編集2018/07/05 05:17

やりたいこと
フォーム画面にエラーを表示したいです。
ログインIDまたはパスワードが違います。という表示が今のままでは、別の画面に表示されてしまいます。
alertではなく、<h1>業務報告システム</h1>の下に、ログインIDまたはパスワードが違います。と表示させたいです。

どのように変更したらいいのでしょうか。

java

1<script type="text/javascript"> 2<!-- 3 4 5 function formcheck(){ 6 var flag = 0; 7 8 //設定開始(必須にする項目を設定してください) 9 if(document.Form1.userId.value == ""){ 10 flag = 1; 11 document.getElementById('notice-input-1'); 12 } 13 else if(document.Form1.pass.value == ""){ 14 document.getElementById('notice-input-2'); 15 flag = 1; 16 } 17 18 if(flag){ 19 document.write('ログインIDまたはパスワードが違います。'); 20 return false; 21 } 22 else{ 23 return true; //送信を実行 24 25 } 26} 27 28// --> 29</script> 30<%@ page language="java" contentType="text/html; charset=UTF-8" 31 pageEncoding="UTF-8"%> 32<h1>業務報告システム</h1> 33</head> 34 <body> 35 <form name = "Form1" action="/gyomuhokoku/LoginServlet" method="post" onsubmit="return formcheck()"><br> 36 37 ユーザーID:<input type="text" name="userId" id="notice-input-1"> <br> 38 パスワード:<input type="text" name="pass" id="notice-input-2"> <br> 39 40 <button type=submit>ログイン</button> 41 </form> 42</body> 43</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2018/07/05 04:57

document.writeしてるからなんですが、どうしたいのでしょうか?alert?それとも同じ画面のどこかに出したい?
m.ts10806

2018/07/05 04:59

質問内容の情報不足です。起きた現象と知らない人が読んでも分かりやすく記載してください。JavaScriptの処理ですが、1行1行何をやっているか自身で説明できますか?
m.ts10806

2018/07/05 05:36

投稿して1,2分でベストアンサーは不安すぎる。 理解してないのに解決済みにするのはやめてください。同レベルの質問を連投されても困ります。
m.ts10806

2018/07/05 05:36

※次に同レベルの内容が連投されるようでしたら悪いですが私は今後あなたの質問には回答しません。
guest

回答2

0

私も質問するたびに若葉マークつけるレベル(そして自分が何をどうやって質問していいかわからなくて、とりあえず質問しちゃって怒られるレベル)の初心者なんですが
わからないどうしということで……

HTML

1<h1>業務報告システム</h1> 2<div id="errmsg01"></div> '←この行を足す

とか入れといて

Javascript

1document.getElementById('errmsg01').textContent = 'ログインIDまたはパスワードが違います。'

みたいな
そういうことでお話は合っていますでしょうか?

あと
「document.writeは使ったらダメ」
って教わったことがあるのですが
なんでダメなのかは教えてもらい忘れた(のか、教えていただいたのに私が理解できなくて忘れちゃったか)ので
ひとの質問に便乗で申し訳ないのですが、なんでこれを使うのがダメなのかを教えていただけると嬉しいです。

投稿2018/07/05 05:47

sumire_cl

総合スコア228

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/05 05:50

>なんでこれを使うのがダメなのかを教えていただけると嬉しいです。 私の回答の冒頭部分を読めば理由は分かってきそうに思います。
m.ts10806

2018/07/05 05:57 編集

↑ではちょっと分かりづらそうなので追記しますと、 ドキュメントからの引用ですが下記です。 >注: document.write は文書ストリームに書き込みを行うため、閉じられた(ロード済みの)文書で document.write を呼び出すと、自動的に document.open が呼ばれ、文書はクリアされます。 例えばロード時に呼び出すようであれば、その場に出力を行うので問題はないといえばないのですが、 <script> document.write('<p>エラー</p>'); </script> これだと普通に<p>エラー</p>とhtml文書として書くのより冗長になってしまいます。 なので「ほとんど意味がない」です。昔よく使われたみたいですが、このような記事もありますので読んでみてください。 http://blog.3streamer.net/html5-css3/document-write-html5-181/ 上記記事でも「強く推奨しない」という引用があります。 今回の例が当てはまりますね。ページ自体は読み込まれた後なので、折角読み込んだ文書がクリアされてしまいます。 もちろん””そうしたくて意図をもって実行するのであれば””良いですが、昨今そういう作りになっているシステムは見かけません。
sumire_cl

2018/07/05 05:59

その書き方だと自画面を潰しちゃうからダメ、というのはとてもわかります。 けど、たとえば <p id='errmsg01'> <script> document.write('ログインIDまたはパスワードが違います。'); </script> </p> みたいな書き方も、ダメ!と教わったのが、いまひとつ頭に入ってきません……。 HTMLのなかにスクリプトを直接混ぜて書くからでしょうか?
m.ts10806

2018/07/05 06:03 編集

> HTMLのなかにスクリプトを直接混ぜて書くからでしょうか? そうですね。いわゆる「可読性」の問題です。 また、その書き方だと画面表示時点でそのメッセージが出力されてしまいます。 「送信ボタンを押して入力チェックした上で出力する」という要件が満たせません。
sumire_cl

2018/07/05 06:03

私が書くのが遅くてすれ違いになってしまいました!ごめんなさい! 提示してくださったリンク先の文書を読みました。 つまり 「直接書き込んじゃうから、もしかしたら書いてあることが崩れちゃったりする危険もあるからダメ」 ということですね? 『ネットワークの遅延にメソッドの動作が影響され…』というのがよくわからないのですが、少なくともDOMが崩れちゃうかもしれないからってところはわかりました。ありがとうございます。
m.ts10806

2018/07/05 07:18 編集

> 私が書くのが遅くてすれ違いになってしまいました!ごめんなさい! いえ、問題ないです。私が待たずにどんどん書いてしまうのも良くないですし。。 > ネットワークの遅延にメソッドの動作が影響され の部分ですが、ちょっと状況の再現が難しいですね。 通常Webサイトにアクセスするときって、インターネット介してアクセスしますよね。 でもその通信状態って必ず一定とは限りません。 携帯だとトンネルとか地下とか、アンテナ基地から離れているところ、建物の奥のほうとかあまり通信状態が良くないです。 Webページ読み込みは上から順番に読み込まれていくわけですが、HTMLタグであっても読み込み途中で通信が途切れた場合、変なところで画面がとまっていることもあります。 で、JavaScriptのdocument.write()の場合、途中で通信が途切れたら「閉じられた(ロード済みの)文書で document.write を呼び出すと、自動的に document.open が呼ばれ、文書はクリアされます。」の原則のもと、折角読み込み途中だったHTML文書がクリアされてしまう自体が起きかねません。 ここの私の理解が正しいかは自信があるわけではないですが、JavaScriptの機能を実行するというのは何かしら今現在のページに影響を与える可能性があるので、特に意外とwrite()は文書をクリアしてしまうなど副作用が大きい、ためきちんと使い分けをしなければならない ということだと思います。
guest

0

ベストアンサー

注: document.write は文書ストリームに書き込みを行うため、閉じられた(ロード済みの)文書で document.write を呼び出すと、自動的に document.open が呼ばれ、文書はクリアされます。

別の画面というより自画面のその後を全てクリアしてしまっているだけです。

<h1>業務報告システム</h1>の下に

適当なタグ(spanなど)を置いておき、そこに埋め込めば良いと思います。
appendChild()などもありますが、毎回エレメント消すのも面倒ですし。

html

1</head> 2 <body> 3<h1>業務報告システム</h1> 4<span id="input_error"></span> 5 <form name = "Form1" action="/gyomuhokoku/LoginServlet" method="post" onsubmit="return formcheck()"><br> 6 7 ユーザーID:<input type="text" name="userId" id="notice-input-1"> <br> 8 パスワード:<input type="text" name="pass" id="notice-input-2"> <br> 9 10 <button type=submit>ログイン</button> 11 </form> 12</body>

JavaScriptのコードも冗長すぎます。
「ログインIDまたはパスワードが」であればif1つに集約できます。flgという変数も不要です。
というか「未入力」なのに「違います」ってメッセージの整合性がとれていません。
「必須」という風にすべきですね。
というのを諸々踏まえたら下記。

js

1function formcheck(){ 2 //必須チェック 3 if(document.Form1.userId.value == "" || document.Form1.pass.value == ""){ 4 document.getElementById('input_error').innerHTML = "ログインID,パスワードは必須です"; 5 return false; 6 } 7 return true; //送信を実行 8}

別個にチェックしたいなら元のコードのelseでは良くないです。

js

1function formcheck(){ 2 var err = ""; 3 //必須チェック 4 if(document.Form1.userId.value == ""){ 5 err += "ログインIDは必須です。<br />"; 6 } 7 if(document.Form1.pass.value == ""){ 8 err += "パスワードは必須です。<br />"; 9 } 10 11 if(err != ""){ 12 document.getElementById('input_error').innerHTML = err; 13 return false; 14 } 15 return true; //送信を実行 16}

他:

  • htmlタグの本文は<body> ~~ </body>の間に書きましょう。文章の基本です。

今のh1タグの位置は、原稿用紙で言えば外枠に書いているようなものです。

  • 何のために入れてるの?↓↓

document.getElementById('notice-input-1');
document.getElementById('notice-input-2');

  • scriptはできれば</body>の直前で

投稿2018/07/05 05:33

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/05 06:16 編集

document.getElementById('notice-input-1');と記述したのは、この後、フォーム画面にエラーを表示させるように書く予定があり、先に試してみたかったからです。使えそうだなと思い.... また、ログインIDまたはパスワードが違います。が違いますという文面にしたのは、ログインが違うんだ、パスワードが違うんだとか、何がちがうのかわからせないためです。 (セキュリティ性を高くするため)
m.ts10806

2018/07/05 06:25 編集

> document.getElementById('notice-input-1');と記述したのは、この後、フォーム画面にエラーを表示させるように書く予定があり、先に試してみたかったからです。使えそうだなと思い... では、そのように追記してください。//TODOと書くとより伝わります。 何もなければただのノイズです。 やはり理解されないままの「ベストアンサー」でしたか。非常に残念です。 折角の回答なのできちんと読んでもらいたいですね。 ここ> 「未入力」なのに「違います」ってメッセージの整合性がとれていません。 入力内容の不備(未入力・文字数・英数など)であれば「何が間違っているのか」を ユーザーに知らせないと間違ったときに何を修正していいか分かりませんよね。 「ログイン認証した上で何が違うか」であれば「ログインIDまたはパスワードが違います」で良いです。 しかし今回は「未入力のチェック」なのでその段階にいっていません。 ユーザーには内容はどうであれ、きちんと入力してもらう必要があります。 それに、JavaScriptであればブラウザの「ソースを表示」などから容易に確認可能です。 セキュリティ面を考慮するのであれば、そもそもJavaScriptで入力チェック(バリデーション)をしていること自体、アウトです。 いずれにしてもサーバー側でのチェックは必須です。
退会済みユーザー

退会済みユーザー

2018/07/05 07:07

やはり理解されないままの「ベストアンサー」でしたか。非常に残念です。 →きちんと回答していただいているのに、大変申し訳ありませんでした。 入力内容の不備(未入力・文字数・英数など)であれば「何が間違っているのか」を ユーザーに知らせないと間違ったときに何を修正していいか分かりませんよね。 「ログイン認証した上で何が違うか」であれば「ログインIDまたはパスワードが違います」で良いです。 しかし今回は「未入力のチェック」なのでその段階にいっていません。 ユーザーには内容はどうであれ、きちんと入力してもらう必要があります →ここを追加で質問させていただきます。 あまりわかっていない部分なのですが、 javascript→未入力チェック サーブレット→ログインの照会 サーブレットからのログインの照会がtrueなのかfalseなのかをjspに返却してもらい、もうひとつif文を用意して、「ログインIDまたはパスワードが違います」と記述する方法なら、問題ないですか? フォワードしたときに、どうやってそれを渡すのかわかっていないですが..... メッセージの意味と処理の方法が、正しく整合性がとれていることが重要だということですよね。
m.ts10806

2018/07/05 07:17 編集

> サーブレットからのログインの照会がtrueなのかfalseなのかをjspに返却してもらい、もうひとつif文を用意して、「ログインIDまたはパスワードが違います」と記述する方法なら、問題ないですか? それは知りません。要件次第です。 既に書いたところでご理解いただけているとは思うのですが、 「未入力である」と「ログイン認証で失敗した」は別の対応です。 別々に対応するのが普通です。teratailのログインでもSNSのログインでも何でもいいです。 実際にやってみてください。 「必須です」「ログイン情報が一致しません」別々でエラーになりますよね。 なぜなら必須項目は複数あり、「何が必須か」は知らせないとユーザーには伝わらないからです。 >フォワードしたときに、どうやってそれを渡すのかわかっていないですが..... サーブレットからjspに情報を渡す方法なら幾らでも調べれば出てくるように思いますけど。 https://www.javadrive.jp/servlet/dispatch/index3.html サーバー側でのチェックは必須 と書いたとおりです。 JavaScriptでのチェックをしていても同じチェックを、今回で言えばLoginServletのdoPost()で行ってください。 その結果、NGであれば元の画面に戻し(これはforwardで良い。それか同じ変数をsetAttribute()に渡すようにしてdoPost()からdoGet()に投げても良い) OKであればログイン後の画面にリダイレクトさせれば良いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問