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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

330閲覧

入力フォームで思うように動きません

gomatan1258

総合スコア67

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/07/06 04:28

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>フォームの練習</title> 6</head> 7<body> 8<div id="container"> 9 <div>ログイン</div> 10 <form action="server.php" method="post"> 11 <p>メールアドレス: <input type="text" name="email" size="50" id="email"><span class="errorMail"></span></p> 12 <p>パスワード: <input type="password" name="password" size="50" id="password"><span class="errorPw"></span></p> 13 <p><input type="submit" value="送信!"></p> 14 <p><input type="hidden" name="user_id" value="12345"></p> 15 </form> 16</div> 17<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 18<script src="javascript.js"></script> 19</body> 20</html>

javascript

1$(function() { 2 $("form").submit(function(){ 3 var checkSubmit = true; 4 var strEmail = $('#email').val(); 5 var strPassword = $('#password').val(); 6 var pattern1 = /^[a-z]/; 7 var pattern2 = /@$/; 8 9 if(strEmail=='') { 10 $('.errorMail').text('文字が入力されていません。'); 11 checkSubmit = false; 12 }else { 13 $('.errorMail').text(''); 14 } 15 16 if(strEmail.indexOf("@") == -1) { 17 $('.errorMail').text('@が含まれていません。'); 18 checkSubmit = false; 19 }else { 20 $('.errorMail').text(''); 21 } 22 23 if(!(pattern1.test(strEmail))) { 24 $('.errorMail').text('最初の文字が半角小文字ではありません。'); 25 checkSubmit = false; 26 }else { 27 $('.errorMail').text(''); 28 } 29 30 if(pattern2.test(strEmail)) { 31 $('.errorMail').text('最後に@文字は入れれません。'); 32 checkSubmit = false; 33 }else { 34 $('.errorMail').text(''); 35 } 36 37 if(strPassword.length < 6 || strPassword.length > 12) { 38 $('.errorPw').text('パスワードは6文字以上、12文字以下で入力して下さい'); 39 checkSubmit = false; 40 }else { 41 $('.errorPw').text(''); 42 } 43 return checkSubmit; 44 }); 45}); 46

今回初めて入力フォームに挑戦していますが、思うように動きません。例えばmailフォームに何も書かなかったときに、errorMailクラスに「文字が入力されていません。」と出力されません。パスワードの方はちゃんと出力されます。この原因を教えていただけますでしょうか?よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

メールアドレスが空の場合、以下の判定はエラーとなりません。
そのためエラーメッセージが空で上書きされていました。

javascript

1 if(pattern2.test(strEmail)) { 2 $('.errorMail').text('最後に@文字は入れれません。'); 3 checkSubmit = false; 4 }else { 5 $('.errorMail').text(''); 6 }

いずれかのチェックでエラーが発生した場合、以降のチェックは行わないようにしたコードです。

javascript

1 $("form").submit(function(){ 2 var checkSubmit = true; 3 var strEmail = $('#email').val(); 4 var strPassword = $('#password').val(); 5 var pattern1 = /^[a-z]/; 6 var pattern2 = /@$/; 7 8 var errorMessageEmail = ''; 9 10 if(strEmail=='') { 11 errorMessageEmail = '文字が入力されていません。'; 12 checkSubmit = false; 13 } 14 15 if (!errorMessageEmail && (strEmail.indexOf("@") == -1)) { 16 errorMessageEmail = '@が含まれていません。'; 17 checkSubmit = false; 18 } 19 20 if(!errorMessageEmail && !(pattern1.test(strEmail))) { 21 errorMessageEmail = '最初の文字が半角小文字ではありません。'; 22 checkSubmit = false; 23 } 24 25 if(!errorMessageEmail && pattern2.test(strEmail)) { 26 errorMessageEmail = '最後に@文字は入れれません。'; 27 checkSubmit = false; 28 } 29 30 $('.errorMail').text(errorMessageEmail); 31 32 if(strPassword.length < 6 || strPassword.length > 12) { 33 $('.errorPw').text('パスワードは6文字以上、12文字以下で入力して下さい'); 34 checkSubmit = false; 35 }else { 36 $('.errorPw').text(''); 37 } 38 39 return checkSubmit; 40 });

投稿2017/07/06 04:50

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

gomatan1258

2017/07/06 05:37

当方の書き方だとTak_Matzさんのおっしゃるように、上書きされてますね。確認したところ@マークを最後に入れた時だけ、メッセージがでました。
guest

0

HTMLの機能にある程度負かしてしまったほうがいいいとおもいますが

HTML

1<form> 2メールアドレス: <input type="text" name="email" size="50" id="email" required pattern="[a-z][0-9a-zA-Z\.]*@[0-9a-zA-Z\.]*[a-z]" title="エラー内容" placeholder="注意事項"><br> 3<input type="submit" value="送信!"></p> 4<p><input type="hidden" name="user_id" value="12345"></p> 5</form> 6

投稿2017/07/06 04:43

yambejp

総合スコア114572

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

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

gomatan1258

2017/07/06 05:34

ご回答ありがとうございます。 html側だけでこんなに設定できるのですね。 教えていただいてありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問