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

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

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

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

Q&A

解決済

4回答

1839閲覧

if文からifelse文への書き換えについて

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2018/07/06 17:59

編集2018/07/06 18:43

下記の条件を、else ifに書き換えるとしたら、どうなるのでしょうか。
やりたいこと
ifをelse ifに書き換えたい。
この後、ほかの条件を追加する予定があるからです。
試したこと
else ifで書いてもスルーされてしまいます。
自分で書いたコードが、どこが悪いのかわかりません。

javascrit

1<html> 2<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 3 4<% 5 //ここでリクエストスコープを受け取る 6 //getAttributeメソッド 7 //追加した属性を取り出す 8 Human human = (Human) request.getAttribute("human"); 9 10 11%> 12<script type="text/javascript"> 13 function formcheck(){ 14 //必須チェック 15 if(document.Form1.userId.value == ""){ 16 //エラーを打ち出す 17 document.getElementById('input_error').innerHTML += "ログインIDが入力されていません。"; 18 } 19 if(document.Form1.pass.value == ""){ 20 document.getElementById('input_error').innerHTML += "パスワードが入力されていません。"; 21 } 22 } 23</script> 24 <body> 25 <h1>ログイン</h1> 26 <span id="input_error"></span> 27 <form name = "Form1" action="/gyomuhokoku/LoginServlet" method="post" onsubmit="return formcheck()"><br> 28 <%@ page import="servlet.Human" %> 29 <% 30 //リクエストスコープからインスタンスを取得 31 Human h = (Human) request.getAttribute("human"); 32 %> 33 <% 34 if(h != null){ 35 %> 36 <%=h.getName() %> 37 <%} %><br> 38 ユーザーID:<input type="text" name="userId" id="notice-input-1"> <br> 39 パスワード:<input type="text" name="pass" id="notice-input-2"> <br> 40 <button type=submit>ログイン</button> 41 </form> 42</body> 43</html>

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

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

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

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

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

og24715

2018/07/06 18:53

submit でバリデーションチェックするんですね。不思議
退会済みユーザー

退会済みユーザー

2018/07/06 18:54

インターネットで拾ったコードを、応用して作ってみたのですが....
退会済みユーザー

退会済みユーザー

2018/07/06 19:00

通常どのように作るかわからない自分にがっかりします
guest

回答4

0

その程度のバリデーションチェックなら js 使うまでもないですね。

https://codepen.io/og24715/pen/xzooRN?editors=1100

投稿2018/07/06 19:26

og24715

総合スコア832

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

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

退会済みユーザー

退会済みユーザー

2018/07/06 19:28

このアプローチは面白いですね。
退会済みユーザー

退会済みユーザー

2018/07/07 04:53

css芸人みがある
guest

0

else ifで書いてもスルーされてしまいます。

「ログインとパスワード両方の入力チェックが同時にしたい」ということであれば、else if ではできません。else if は前にある if の条件が通った場合(エラー判定された場合)実行されません。

投稿2018/07/06 18:23

kei344

総合スコア69366

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

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

退会済みユーザー

退会済みユーザー

2018/07/06 18:35

同時にはしません。別で処理したいのです。
kei344

2018/07/06 18:39

> 一瞬エラーが表示されて、消えます.... ああ、submitボタンでチェックを実行していたりしませんか。
退会済みユーザー

退会済みユーザー

2018/07/06 18:41

してます。 ソースコード全部のせます。少々お待ちください
退会済みユーザー

退会済みユーザー

2018/07/06 18:43

記載しました!
退会済みユーザー

退会済みユーザー

2018/07/06 18:45

if文の場合は、思うように動いたので、HTMLの問題は、考えていませんでした。
kei344

2018/07/06 18:49

どのように「if文の場合」を書いていたか不明ですが、エラーのときにどう処理をしていたかを確認して、同じように処理をすればよいです。
退会済みユーザー

退会済みユーザー

2018/07/06 18:56

頭ではわかっているのですが....難しいですね...
guest

0

ベストアンサー

javascript

1<script type="text/javascript"> 2function formcheck(){ 3 //必須チェック 4 if(document.Form1.userId.value == ""){ 5 //エラーを打ち出す 6 document.getElementById('input_error').innerHTML += "ログインIDが入力されていません。"; 7 } 8 if(document.Form1.pass.value == ""){ 9 document.getElementById('input_error').innerHTML += "パスワードが入力されていません。"; 10 } 11} 12</script>

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Sample</title> 6 </head> 7 <body> 8 <form id="form" method="post" action=""> 9 <span id="input_error"></span> 10 11 <p> 12 <input type="text" name="user" id="user" /> 13 </p> 14 15 <p> 16 <input type="password" name="password" id="password" /> 17 </p> 18 19 <p> 20 <button id="btn" type="button">送信</button> 21 </p> 22 23 </form> 24 <script type="text/javascript"> 25 function validate() { 26 var user = document.getElementById('user'); 27 var password = document.getElementById('password'); 28 var message = document.getElementById('input_error'); 29 var err = []; 30 if (user.value.toString() === '') { 31 err.push('ログインIDが入力されていません。'); 32 } 33 if (password.value.toString() === '') { 34 err.push('パスワードが入力されていません。'); 35 } 36 if (err.length > 0) { 37 message.innerHTML = err.join('<br>'); 38 return false; 39 } 40 return true; 41 } 42 43 var btn = document.getElementById('btn'); 44 btn.addEventListener('click', function (e) { 45 if (validate()) { 46 document.getElementById('form').submit(); 47 } 48 }); 49 </script> 50 </body> 51</html>

投稿2018/07/06 18:01

編集2018/07/06 19:09
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2018/07/06 18:19

うまくうごかないですね....
kei344

2018/07/06 18:24

To: Kosuke_Shibuyaさん 閉じ括弧がひとつ足りないのでは?
退会済みユーザー

退会済みユーザー

2018/07/06 18:28

最後に入れるんですか??
退会済みユーザー

退会済みユーザー

2018/07/06 18:31

最後に入れてもうごかないですね
退会済みユーザー

退会済みユーザー

2018/07/06 18:31

修正しました。
退会済みユーザー

退会済みユーザー

2018/07/06 18:37

一瞬エラーが表示されて、消えます....
退会済みユーザー

退会済みユーザー

2018/07/06 18:39

あのねぇー HTMLも提示せずに、JavaScriptだけ提示しておいて、「動かねー」とかあとでいうなら、初めから状況再現できるだけの情報出しておけよ。
退会済みユーザー

退会済みユーザー

2018/07/06 18:49

ごめんなさい
退会済みユーザー

退会済みユーザー

2018/07/06 18:50

本当に申し訳ありませんでした。
退会済みユーザー

退会済みユーザー

2018/07/06 19:19

追記しておきました。
退会済みユーザー

退会済みユーザー

2018/07/07 03:19

うまく動作しません....
退会済みユーザー

退会済みユーザー

2018/07/07 04:55 編集

回答したファイルだけで動かしてみたら?
退会済みユーザー

退会済みユーザー

2018/07/07 05:09

文字化けしてしまうんですよね。
退会済みユーザー

退会済みユーザー

2018/07/07 05:09

UTF-8で保存していないんでしょ?
退会済みユーザー

退会済みユーザー

2018/07/07 05:15

eclipsで動かしていて、<html></html>の中に埋め込んでるのですが、間違っていますか?
退会済みユーザー

退会済みユーザー

2018/07/07 05:17 編集

変にいじらず、回答に示したコードだけで動作確認してくれと言っているんですけど。
退会済みユーザー

退会済みユーザー

2018/07/07 05:50

動作確認ができました。 ありがとうございました。 文字化けの原因は、 自分のtomcatがutf-8と認識していないようでした。
guest

0

通常どのように作るかわからない自分にがっかりします

質問単体とは少し離れて、これまでの質問者さんのやり方に対してと、上記お悩みにお答えする形で回答します。

html、JavaScriptなどブラウザのソースから確認できるコードはブラウザ開発ツールなどから改ざん可能です。
もしかしたら他の質問でもアドバイスしたかもしれませんが、サーバーサイドでのバリデーションは必須です。

JavaScriptでのチェックをしても正直なところ効果はそこまで見込めません。
通常はServletであればServlet側でバリデーションを行い、エラーが起きた情報(エラーメッセージなど)のみを画面(jsp)に返します。

質問者さんが調べなければならないのは「JavaScript 入力チェック」ではなく「Servlet 入力チェック」です。

下記の質問の回答には直接のコードはありませんが、流れ・考え方があります。

下記は、サーバー側、クライアント側双方のチェックのサンプルコードです。

両方のチェックをしているのは最初に述べた「サーバーサイドでのバリデーションは必須」という原則のもとです。

JavaScriptで対応することばかり考えているからか、Javaのコード提示がほとんどないのが非常に残念ですね。このままでは根本解決に至らないように思います。
なぜなら、いずれにせよログイン処理なりデータアクセスなり、データ保存・更新・削除なりはJavaで書いていくことになりますよね。
入力チェックは基本的な文法(もちろん正規表現なども)を使うことが多いため、ここからきちんとJavaを使っていくことでしっかりと基本が身につくものだと思います。

ここでいったん立ち止まって、きちんとJavaで組んでみませんか?
Servletにてリクエストを受け取りレスポンスを返す という基本的な流れも身につくはずです。
基本全部JavaScriptで処理してサーバー側でしかできないことをAjaxで任せる・・・という上でもリクエスト・レスポンスの考えは必須です。

投稿2018/07/07 00:03

編集2018/07/07 00:07
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/07/07 06:07

いつも的確なご指摘、ありがとうございます。 立ち止まって、きちんとJavaで組みます。
退会済みユーザー

退会済みユーザー

2018/07/07 06:09

今日中にサーブレットを組みなおして、再度質問を更新したいと考えています。 質問の内容は、解決済みではあるのですが...
m.ts10806

2018/07/07 07:30

どちらも今後必ず役に立ちますので。
退会済みユーザー

退会済みユーザー

2018/07/07 08:39

やはりいい感じにスッキリ書けませんでした。(基礎ができていないんですね....) 新たな質問に記載しました。
m.ts10806

2018/07/07 08:45

まだ見てませんが いきなりいい感じにスッキリ書く必要ないですよ。まずはどんなに不細工でも動くものを作るところからです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問