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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3996閲覧

チェックボックス がチェックされていなかったらエラーメッセージを出したい

MIYABITSUJIMOTO

総合スコア19

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/01 01:30

編集2020/11/01 01:36

問い合わせフォームで、プライバシーポリシーに同意のチェックがなかったら赤文字で「チェックされていないです」のような文言を出したいです。
inputのテキストボックスは実装できました。

javascript

1// 入力内容チェック 2 3 // お名前 4 if(name == ""){ 5 $("#name_error").html(" お名前は必須です。"); 6 $("#name").addClass("inp_error"); 7 result = false; 8 }else if(name.length > 25){ 9 $("#name_error").html(" お名前は25文字以内で入力してください。"); 10 $("#name").addClass("inp_error"); 11 result = false; 12 } 13 14 // プライバシーポリシー 15 if(pp == ""){ 16 $("#pp_error").html(" プライバシーポリシーは必須です。"); 17 $("#pp").addClass("inp_error"); 18 result = false; 19 } 20

このように、テキストの時はif(name == "")で入力がなかったら、、、、でIf文を作成しました。
ですが、このinputのチェックボックス の時がこれだと実装できませんでした
(pp != "check")
(pp != "checked")
(pp != check)
(pp != checked)
(document.getElementById('pp').value == null)
(document.getElementById('pp').value == "")
など色々試したのですが、どれも効きませんでした。
調べてもこの全く同じように使えるものが見つからず詰まってしまいました。
この(pp = "")の部分を変更するだけで実装することはできないのでしょうか?
違う文章を書く必要がありますか?

ご教授いただけると幸いです。

以下コードです。

html

1<section class="contact-wrapper"> 2 <div class="container"> 3 <div class="contact-contents"> 4 <p>ホームページをご覧いただきましてありがとうございます。 <br>協賛に関するお問い合わせやご質問等は下記フォームからご連絡ください。<br> 折り返しご連絡いたします。</p> 5 6 <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdm0jUbTnbKbr3_GIJpfGACtCCU4nAjUjzxIiUKFEWGa1QDIw/formResponse" target="hidden_iframe" method="POST" id="mG61Hd" jsmodel="TOfxwf Q91hve" data-response="%.@.[]]" data-first-entry="0" data-last-entry="5" data-is-first-page="true" onsubmit="submitted=true;"> 7 <div class="contact-items"> 8 <label for="name" class="contact-title required ct-name">お名前*</label> 9 <div class="input-item"> 10 <input name="entry.1230614935" type="text" id="name" class="input-text" required placeholder="入力して下さい"> 11 <p class="error_m" id="name_error"></p> 12 </div> 13 </div> 14 15 16 <div class="contact-items"> 17 <label for="text" class="contact-title">お問い合わせ内容詳細</label> 18 <textarea name="entry.57182976" id="text" placeholder="入力して下さい"></textarea> 19 </div> 20 <div class="contact-items contact-items-check"> 21 <label for=""><input name="entry.926460193" type="checkbox" id="pp"><a href="privacy-policy.html" class="contact-pp">プライバシーポリシーに同意</a></label> 22 <p class="error_m" id="pp_error"></p> 23 </div> 24 <div class="submit-btn"> 25 <input type="submit" src="/img/submit.svg" id="btn_submit"> 26 </div> 27 </form> 28 </div> 29 </div> 30 </section> 31

javascript

1 2 3 $(function(){ 4 $('input:submit[id="btn_submit"]').click(function(){ 5 if(!input_check()){ 6 return false; 7 } 8 }); 9 }); 10 11 // 入力内容チェックのための関数 12 function input_check(){ 13 var result = true; 14 15 // エラー用装飾のためのクラスリセット 16 $('#name').removeClass("inp_error"); 17 $('#pp').removeClass("inp_error"); 18 19 // 入力エラー文をリセット 20 $("#name_error").empty(); 21 $("#pp_error").empty(); 22 23 24 // 入力内容セット 25 var name = $("#name").val(); 26 var pp = $("#pp").val(); 27 28 29 // 入力内容チェック 30 31 // お名前 32 if(name == ""){ 33 $("#name_error").html(" お名前は必須です。"); 34 $("#name").addClass("inp_error"); 35 result = false; 36 }else if(name.length > 25){ 37 $("#name_error").html(" お名前は25文字以内で入力してください。"); 38 $("#name").addClass("inp_error"); 39 result = false; 40 } 41 42 // プライバシーポリシー 43 if(pp == ""){ 44 $("#pp_error").html(" プライバシーポリシーは必須です。"); 45 $("#pp").addClass("inp_error"); 46 result = false; 47 } 48 49 50 51 52 53 54

Sass

1 2//お問い合わせ 3 4.contact-wrapper { 5 background-color: #4EE5F4; 6 padding-top: 80px; 7 padding-bottom: 178px; 8 position: relative; 9 @include mq('md') { 10 padding-top: 200px; 11 } 12 .contact-contents { 13 p { 14 line-height: 28px; 15 font-size: 16px; 16 font-weight: bold; 17 padding-bottom: 40px; 18 @include mq('sm') { 19 font-size: 22px; 20 } 21 } 22 form { 23 .contact-items { 24 margin-bottom: 32px; 25 @include mq('sm') { 26 display: flex; 27 justify-content: space-between; 28 } 29 30 .contact-title { 31 font-size: 16px; 32 font-weight: bold; 33 @include mq('sm') { 34 width: 35%; 35 display: block; 36 font-size: 18px; 37 } 38 @include mq('md') { 39 font-size: 22px; 40 } 41 } 42 .input-item { 43 @include mq('sm') { 44 display: inline-block; 45 width: 65%; 46 } 47 .contact-error { 48 color: #DD0000; 49 font-size: 18px; 50 } 51 } 52 input, textarea { 53 margin-top: 8px; 54 border: 1px solid #B5B5B5; 55 &::placeholder { 56 color: #B5B5B5; 57 } 58 } 59 .input-text { 60 display: block; 61 width: 100%; 62 height: 50px; 63 64 } 65 66 textarea { 67 height: 140px; 68 display: block; 69 width: 100%; 70 @include mq('sm') { 71 width: 65%; 72 } 73 } 74 input[type="checkbox"] { 75 height: 25px; 76 width: 25px; 77 } 78 79 .contact-title { 80 line-height: 50px; 81 } 82 .contact-pp { 83 color: #333333; 84 line-height: 50px; 85 &:hover { 86 text-decoration: #333333; 87 } 88 } 89 .contact-error { 90 color: #DD0000; 91 font-size: 18px; 92 } 93 .inp_error { 94 border: 1px solid #DD0000; 95 } 96 } 97 .contact-items-check { 98 display: block; 99 margin: 0 auto; 100 padding-bottom: 86px; 101 @include mq('sm') { 102 text-align: center; 103 } 104 input { 105 vertical-align: top; 106 } 107 108 } 109 .submit-btn { 110 display: block; 111 margin: 0 auto; 112 text-align: center; 113 &:hover { 114 color: #141c7b; 115 background-color: #fff; 116 border: 3px solid #141c7b; 117 } 118 input { 119 display: block; 120 margin: 0 auto; 121 text-align: center; 122 } 123 } 124 125 } 126 } 127 128} 129 130 131.inp_error { 132 border: 1px solid #F88A8A !important; 133 background: #F4D4D4 !important; 134 135} 136 137.error_m { 138 font-size: 12px; 139 font-weight: normal; 140 color: #FF4040; 141 display: block; 142 margin: 0; 143}

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

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

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

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

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

guest

回答1

0

自己解決

falseを使ったらいけました

投稿2020/11/01 01:51

MIYABITSUJIMOTO

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問