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

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

ただいまの
回答率

90.33%

  • JavaScript

    17542questions

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

  • Java

    14431questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 402

e-power-ma

score 32

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

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

<script type="text/javascript">
<!--


        function formcheck(){
        var flag = 0;

        //設定開始(必須にする項目を設定してください)
        if(document.Form1.userId.value == ""){
        flag = 1;
        document.getElementById('notice-input-1');
        }
        else if(document.Form1.pass.value == ""){
           document.getElementById('notice-input-2');
        flag = 1;
        }

        if(flag){
        document.write('ログインIDまたはパスワードが違います。');
        return false;
        }
        else{
        return true; //送信を実行

        }
}

//  -->
</script>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>業務報告システム</h1>
</head>
 <body>
        <form name = "Form1" action="/gyomuhokoku/LoginServlet" method="post" onsubmit="return formcheck()"><br>

         ユーザーID:<input type="text" name="userId" id="notice-input-1"> <br>
        パスワード:<input type="text" name="pass" id="notice-input-2"> <br>

        <button type=submit>ログイン</button>
    </form>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • papinianus

    2018/07/05 13:57

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

    キャンセル

  • mts10806

    2018/07/05 13:59

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

    キャンセル

  • mts10806

    2018/07/05 14:36

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

    キャンセル

  • mts10806

    2018/07/05 14:36

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

    キャンセル

回答 2

checkベストアンサー

+1

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

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

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

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

</head>
 <body>
<h1>業務報告システム</h1>
<span id="input_error"></span>
        <form name = "Form1" action="/gyomuhokoku/LoginServlet" method="post" onsubmit="return formcheck()"><br>

         ユーザーID:<input type="text" name="userId" id="notice-input-1"> <br>
        パスワード:<input type="text" name="pass" id="notice-input-2"> <br>

        <button type=submit>ログイン</button>
    </form>
</body>


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

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


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

function formcheck(){
    var err = "";
    //必須チェック
    if(document.Form1.userId.value == ""){
        err += "ログインIDは必須です。<br />";
    }
    if(document.Form1.pass.value == ""){
        err += "パスワードは必須です。<br />";
    }

    if(err != ""){
        document.getElementById('input_error').innerHTML = err;
        return false;
    }
    return true; //送信を実行
}

他:

  • htmlタグの本文は<body> ~~ </body>の間に書きましょう。文章の基本です。
    今のh1タグの位置は、原稿用紙で言えば外枠に書いているようなものです。
  • 何のために入れてるの?↓↓
    document.getElementById('notice-input-1'); 
    document.getElementById('notice-input-2');
  • scriptはできれば</body>の直前で

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 15:16 編集

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

    キャンセル

  • 2018/07/05 15:24 編集

    > document.getElementById('notice-input-1');と記述したのは、この後、フォーム画面にエラーを表示させるように書く予定があり、先に試してみたかったからです。使えそうだなと思い...

    では、そのように追記してください。//TODOと書くとより伝わります。
    何もなければただのノイズです。

    やはり理解されないままの「ベストアンサー」でしたか。非常に残念です。
    折角の回答なのできちんと読んでもらいたいですね。
    ここ> 「未入力」なのに「違います」ってメッセージの整合性がとれていません。

    入力内容の不備(未入力・文字数・英数など)であれば「何が間違っているのか」を
    ユーザーに知らせないと間違ったときに何を修正していいか分かりませんよね。
    「ログイン認証した上で何が違うか」であれば「ログインIDまたはパスワードが違います」で良いです。
    しかし今回は「未入力のチェック」なのでその段階にいっていません。
    ユーザーには内容はどうであれ、きちんと入力してもらう必要があります。

    それに、JavaScriptであればブラウザの「ソースを表示」などから容易に確認可能です。
    セキュリティ面を考慮するのであれば、そもそもJavaScriptで入力チェック(バリデーション)をしていること自体、アウトです。
    いずれにしてもサーバー側でのチェックは必須です。

    キャンセル

  • 2018/07/05 16:07

    やはり理解されないままの「ベストアンサー」でしたか。非常に残念です。
    →きちんと回答していただいているのに、大変申し訳ありませんでした。


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

    メッセージの意味と処理の方法が、正しく整合性がとれていることが重要だということですよね。

    キャンセル

  • 2018/07/05 16:13 編集

    > サーブレットからのログインの照会が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であればログイン後の画面にリダイレクトさせれば良いです。

    キャンセル

+1

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

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

とか入れといて

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/05 14:50

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

    キャンセル

  • 2018/07/05 14:56 編集

    ↑ではちょっと分かりづらそうなので追記しますと、

    ドキュメントからの引用ですが下記です。
    >注: 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/

    上記記事でも「強く推奨しない」という引用があります。
    今回の例が当てはまりますね。ページ自体は読み込まれた後なので、折角読み込んだ文書がクリアされてしまいます。
    もちろん””そうしたくて意図をもって実行するのであれば””良いですが、昨今そういう作りになっているシステムは見かけません。

    キャンセル

  • 2018/07/05 14:59

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

    キャンセル

  • 2018/07/05 15:02 編集

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

    キャンセル

  • 2018/07/05 15:03

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

    キャンセル

  • 2018/07/05 15:16 編集

    > 私が書くのが遅くてすれ違いになってしまいました!ごめんなさい!
    いえ、問題ないです。私が待たずにどんどん書いてしまうのも良くないですし。。

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

    キャンセル

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17542questions

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

  • Java

    14431questions

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