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

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

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

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

1回答

1267閲覧

jQueryを用いたバリーデーションチェックがうまくいきません

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2021/06/03 08:26

編集2021/06/04 06:40

前提・実現したいこと

グーグルフォームと連携させていて、カスタマイズしたものを使用しております。
データ自体はグーグルフォームに行くようにしており、完了画面はオリジナルに遷移させる予定です。
(※今は一時的にURLがわからないため、適当なサイト様のURLを設定させてもらっています)

完了画面の遷移はうまくいきますし、未記入項目があった場合にグーグルフォームに遷移してしまうこともありません。
他者様のサイトなのでこちらではちょっとご紹介できないのですが、成功例を参考にさせていただきながら必要箇所を適宜修正したり、といった具合で実装していたのですが、どうにも上手く動きません。

いろいろな方法で試してはjsの方はコメントアウトしてを繰り返していたので、もしかしたら別の方法で試してものが相殺しあっているのかもしれないなどとは思いました。
ただ、

①未記入項目があっても、「class:aleart」を設定しているメッセージが出ない
(もしくは記入済みになったらそのメッセージを非表示にする)
②すべての項目を記入・プライバシーポリシーをチェックしないと送信ボタンは押せない(無効化)
逆に、すべて記入・チェックしているとはじめて送信ができるようになる

かなり悩んでいまして、ぜひご教授頂けますと幸いです。

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

未記入項目があってもなくてもボタンが押せる 未記入であっても該当箇所にエラーメッセージが表示されない

該当のソースコード

HTML

1 <script> var sendFlag = true;</script> 2 <form data-aos="fade-up" name="myForm" method="post" target="dummyIframe" onsubmit="submitted=true;" action="ここにはURLを入れています" id="contact"> 3 <dl id="textSection"> 4 <dt>お名前</dt> 5 <input type="text" class="contact-form" name="entry.2005620554" id="text"> 6 <p class="alert">※お名前が入力されていません</p> 7 8 </dl> 9 <dl id="textSection"> 10 <dt>メールアドレス</dt> 11 <input type="email" class="contact-form" name="emailAddress" value="" pattern="^(([-\w\d]+)(.[-\w\d]+)*@([-\w\d]+)(.[-\w\d]+)*(.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" id="text"> 12 <p class="alert" >※メールアドレスが入力されていません</p> 13 14 </dl> 15 <dl id="textareaSection"> 16 <dt>お問い合わせ内容</dt> 17 <textarea class="contact-form" name="entry.839337160" id="textarea"></textarea> 18 <p class="alert">※お問い合わせ内容が入力されていません</p> 19 20 </dl> 21 22 <label class="check" id="privacyCheck"> 23 <input type="checkbox" for="privacyCheck" class="privacyCheck" name="myForm" id="privacyCheck">プライバシーポリシーに同意する 24 <p class="alert">※プライバシーポリシーを必読の上、同意にチェックをしてください</p> 25 26 27 </label> 28 29 <button class="btn" type="submit" value="送信する" id="js-submit">送信する</button> 30 31 </form>

該当のソースコード

CSS

1 2html body form { 3 padding: 60px; 4 background-color: #FFFFFF; 5 margin-top: 44px; 6 color: #333333; 7 font-weight: bold; 8 text-align: left; 9 /* .text{ 10 text-align: center; 11 line-height: 2.8; 12 13 14 } */ 15 /* &::before{ 16 content:""; 17 display: inline-block;//これを指定すると現れる 18 width:20px; 19 height:20px; 20 text-align: center; 21 border:1px solid $border-glay; 22 margin-right:10px; 23 } */ 24} 25 26@media screen and (max-width: 767px) { 27 html body form { 28 padding: 15px; 29 } 30} 31 32html body form input, html body form textarea { 33 background-color: #EEFBFB; 34 border: none; 35} 36 37html body form input { 38 max-width: 499px; 39 max-height: 62px; 40} 41 42@media screen and (max-width: 767px) { 43 html body form input { 44 max-width: 300px; 45 } 46} 47 48html body form label { 49 margin: 0 auto; 50 text-align: center; 51 display: block; 52 padding-top: 72px; 53} 54 55html body form dl { 56 margin-bottom: 27px; 57} 58 59html body form dl:last-of-type { 60 margin-bottom: 0; 61} 62 63html body form dl:last-of-type textarea { 64 width: 100vw; 65 max-width: 1000px; 66 min-height: 179px; 67 resize: none; 68} 69 70@media screen and (max-width: 999px) { 71 html body form dl:last-of-type textarea { 72 width: 60vw; 73 min-height: 230px; 74 } 75} 76 77@media screen and (max-width: 767px) { 78 html body form dl:last-of-type textarea { 79 width: 65vw; 80 min-height: 230px; 81 } 82} 83 84html body form dl input { 85 width: 49vw; 86 height: 43px; 87} 88 89html body form dt { 90 position: relative; 91 margin-bottom: 39px; 92} 93 94html body form dt::after { 95 position: absolute; 96 content: '必須'; 97 color: #FFFFFF; 98 text-align: center; 99 display: inline-block; 100 width: 60px; 101 height: 30px; 102 background-color: #0C449B; 103 border-radius: 10px; 104 font-size: 1.4rem; 105 margin-left: 23px; 106 font-weight: normal; 107} 108 109html body form .check { 110 text-align: center; 111 margin-bottom: 30px; 112} 113 114html body form .check input { 115 -webkit-appearance: none; 116 -moz-appearance: none; 117 appearance: none; 118 outline: none; 119 width: 20px; 120 height: 20px; 121 cursor: pointer; 122 text-align: center; 123 background-color: #FFFFFF; 124 line-height: 2.8; 125 border: 2px solid #00000029; 126 vertical-align: -5px; 127} 128 129html body form .check input:checked { 130 background-image: url(../img/sozai_arrow.svg); 131 overflow: hidden; 132 background-position: center; 133 background-size: cover; 134 width: 20px; 135 height: 20px; 136 background-repeat: no-repeat; 137} 138 139html body form .btn { 140 margin: 0 auto; 141 border: none; 142 background: -webkit-linear-gradient(left, #FA41CC, #6020B0); 143 width: 155px; 144 height: 37px; 145 display: block; 146 border-radius: 10px; 147 color: #FFFFFF; 148 text-align: center; 149 font-size: 1.4rem; 150 font-weight: normal; 151} 152 153html body form .alert { 154 color: red; 155 text-align: left; 156 margin: 0 auto; 157} 158 159html body #thxMessage { 160 font-size: 2rem; 161 color: #FFFFFF; 162} 163

js

1 //jqueryを用いたバリデーション 2//全てのアラート分を非表示にする クラスでまとめて 3 4$(".alert").hide(); 5//送信ボタンをクリック 6 $("#js-submit").click(function () { 7 //チェック用の変数sendflag これがすべてtrueであれば送信の許可を出す 8 var sendFlag = true; 9 10 //一行入力フィールドのチェック 11 if (!$("#text").val()) { 12 //入力がない:アラート分を表示 13 $("#textSection .alert").show(); 14 sendFlag = false;//入力がなければfalseに 15 } else { 16 //入力がある:アラート分を非表示 17 $("#textSection .alert").hide(); 18 } 19 20 //複数行textareaのチェック 21 if (!$("#textarea").val()) { 22 //入力がない:アラート分を表示 23 $("#textareaSection .alert").show(); 24 sendFlag = false;//入力がなければfalseに 25 } else { 26 //入力がある:アラート分を非表示 27 $("#textareaSection .alert").hide(); 28 } 29 30 31 //ポリシーのチェック項目 32 $('#js-submit').prop('disabled', true); 33 34 $('#privacyCheck').on('click', function () { 35 if ($(this).prop('checked') == false) { 36 $('#js-submit').prop('disabled', true); 37 } else { 38 $('#js-submit').prop('disabled', false); 39 } 40 });

試したこと

https://www.webdlab.com/labs/form-input-textarea-2/

書籍:jQuery標準デザイン講座 フォームのバリデーションコード参考

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

OS:Windows
エディタ:VScode
ブラウザ:クローム

ご回答を受けての訂正後

やりたいことが実は質問当時は矛盾していて、
未記入項目があり、ボタンを押したときにしたい挙動は「エラーメッセージを表示 かつ 完了画面には遷移しない」
であり、ボタンそのものを押せなくしたいわけではなかったと自覚しました。
よって、成功したコードをいかに訂正致します。

js

1$(function () { 2 //jqueryを用いたバリデーション 3//全てのアラート分を非表示にする クラスでまとめて 4 5$(".alert").hide(); 6//送信ボタンをクリック 7 $("#contact input, #contact textarea").on("change",function () { 8 //チェック用の変数sendflag これがすべてtrueであれば送信の許可を出す 9 var sendFlag = true; 10 11 //一行入力フィールドのチェック 12 if (!$("#text").val()) { 13 //入力がない:アラート分を表示 14 $("#textSection .alert").show(); 15 sendFlag = false;//入力がなければfalseに 16 } else { 17 //入力がある:アラート分を非表示 18 $("#textSection .alert").hide(); 19 } 20 21 //複数行textareaのチェック 22 if (!$("#textarea").val()) { 23 //入力がない:アラート分を表示 24 $("#textareaSection .alert").show(); 25 sendFlag = false;//入力がなければfalseに 26 } else { 27 //入力がある:アラート分を非表示 28 $("#textareaSection .alert").hide(); 29 } 30 31 32 }); 33 //ポリシーのチェック項目 34 $('#js-submit').prop('disabled', true); 35 $('#privacyCheck').on('click', function () { 36 if ($(this).prop('checked') == false) { 37 $('#js-submit').prop('disabled', true); 38 } else { 39 $('#js-submit').prop('disabled', false); 40 } 41 }); 42 43 //フォームが送信されないようにするには以下のreturn falseが必要 44 //上記の各項目がすべてfalseになることなく、trueであればreturn false(送信の無効化)を改めて解除して、送信の有効化にする 45 if (sendFlag == false) { 46 return false;//falseであれば送信を許可しない(そうでなければ送信) 47 } 48 49 50});

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

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

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

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

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

guest

回答1

0

ベストアンサー

HTMLの<button class="btn" type="submit" value="送信する" id="js-submit">送信する</button>の部分に全角スペースがあるため、正しく動作しないようです。
(上記のbutton要素にidが指定されていないため、$("#js-submit").click(function () {以下が呼び出されていません)

投稿2021/06/03 08:39

hallen0225

総合スコア587

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

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

mitrasi

2021/06/03 08:51 編集

ご回答ありがとうございます! 早速試してみたところおっしゃる通りで、プライバシーポリシー以外はこれで直りました。 (なんともしょうもないミスでお恥ずかしい限りです…) ただ、何回かに1回とかたまに記入済みのエラーメッセージも表示されてしまうようです???? しかし、プライバシーポリシーは正しく動作できませんでした???? やはり書き方が間違っているのでしょうか?
hallen0225

2021/06/03 08:56

プライバシーポリシーのチェックボックスに関して見落としておりました。 Javascriptの「$('#privacyCheck').on('click', function () {」以下の部分が、「$("#js-submit").click(function () {」の中に入ってしまっています。 そのため、「$('#privacyCheck').on('click', function () {」以下は呼び出されることがないのだと思います。
hallen0225

2021/06/03 09:09 編集

ところで、「これがすべてtrueであれば送信の許可を出す」に相当する処理が見当たらないように思うのですが、この部分は大丈夫でしょうか? あと、privacyCheckというidが2つの要素(labelとinput)についてしまっているので、inputのみにつくようにすした方がよいように思います(idは、1つのページ内で重複してはいけないルールです)
mitrasi

2021/06/04 02:49

ご回答ありがとうございます! プライバシーポリシーの方、なるほどと思い、「$("#js-submit").click(function () {」外に出してみましたが、チェックを付けないと送信はできませんがエラーメッセージも表示されません。 ご指摘いただきました「これがすべてtrueであれば送信の許可を出す」箇所に関してはぬけておりましたので、そこも含めて現状を更新致しました。ぜひご教授頂けますと幸いです。
hallen0225

2021/06/04 06:12

エラーメッセージというのはどのタイミングで出力したいのですか?? チェックが付いていないと送信ボタンが押せないわけなので、「送信ボタンを押したタイミング」ではないのだと思いますが。 ここまでたどり着いていて、質問文のコードを自力で書ける方ならば、エラーメッセージをいつ出したいか考えれば回答に行き着けると思います。
mitrasi

2021/06/04 06:36

考え方のヒントまでありがとうございます。 考え直したところ、 「送信ボタンを押すときに未記入があるとボタンを押せなくなる」と 「未記入項目があったらエラーメッセージを発生させる」と ボタンを押したときにエラーメッセージを発生させる処理を指示しているのに、 未記入があるとそもそもボタンを押せなくなるのでそこで矛盾が発生していたようです。 結果としてやりたいことは、 「プライバシーポリシーも含め未記入項目がある場合に、送信ボタンを押した際に、完了画面に遷移しない(ただしボタンを無効化するわけではない)、代わりにエラーメッセージを表示する。」 ということがしたかったのだと明確にすることができました。 おかげさまで、やり方をご教授頂くだけでなく、お導きを頂き深い学びになりました。 初歩的なことですが、やりたいことを明確にし、指示と矛盾していないか意識していこうと思います。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問