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

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

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

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

jQuery

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

HTML

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

Q&A

解決済

2回答

3270閲覧

javascript フォーム未入力がある場合の確認方法 ラジオボタン、チェックボックス、テキストエリア

fed

総合スコア6

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2020/05/13 13:58

編集2020/05/13 14:52

ラジオボタン、チェックボックス、テキストエリアが混在し、且つ入力必須任意があるアンケートフォーム画面についてです。
buttonクリックしたときに、class="required"の未入力があるかどうかをチェックしたいです。

html

1<form name="form1" id="form1"> 2 <div class="radioBox required"> 3 <input type="radio" name="00" value="りんご">りんご<br /> 4 <input type="radio" name="00" value="バナナ">バナナ<br /> 5 <input type="radio" name="00" value="オレンジ">オレンジ<br /> 6 </div> 7 8 <div class="radioBox required"> 9 <input type="radio" name="01" value="りんご">りんご<br /> 10 <input type="radio" name="01" value="バナナ">バナナ<br /> 11 <input type="radio" name="01" value="オレンジ">オレンジ<br /> 12 </div> 13 14 <div class="radioBox required"> 15 <input type="radio" name="02" value="りんご">りんご<br /> 16 <input type="radio" name="02" value="バナナ">バナナ<br /> 17 <input type="radio" name="02" value="オレンジ">オレンジ<br /> 18 </div> 19 20 <div class="checkBox"> 21 <input type="checkbox" name="03" value="りんご">りんご<br /> 22 <input type="checkbox" name="03" value="バナナ">バナナ<br /> 23 <input type="checkbox" name="03" value="オレンジ">オレンジ<br /> 24 </div> 25 26 <div class="checkBox required"> 27 <input type="checkbox" name="04" value="りんご">りんご<br /> 28 <input type="checkbox" name="04" value="バナナ">バナナ<br /> 29 <input type="checkbox" name="04" value="オレンジ">オレンジ<br /> 30 </div> 31 32 <div class="checkBox required"> 33 <input type="checkbox" name="05" value="りんご">りんご<br /> 34 <input type="checkbox" name="05" value="バナナ">バナナ<br /> 35 <input type="checkbox" name="05" value="オレンジ">オレンジ<br /> 36 </div> 37 38 <div class="textarea required"><input type="text"></div> 39 40 <div class="textarea"><input type="text"></div> 41 42 <p class="alert"></p> 43 <input type="button" value="回答する"> 44</form>

試したこと

はじめはチェックボックスがなかったので、ラジオボタンはすべて必須のため、
ラジオボタンのアンケート数に対して、checkedの数を照らし合わせて判定していたのですが、

JavaScript

1$(function(){ 2 $('input:button').click(function(){ 3 var classCount = $('.radioBox').length; 4 var checkedCount = $('#form1 input:radio:checked').length; 5 if(classCount > checkedCount){ 6 $('.alert').text("すべて選択してください"); 7 return false; 8 9 }else{ 10 $("#surveyArea").replaceWith('<p id="surveyCompletion">回答ありがとうございました</p>'); 11 myData(); 12 } 13 }); 14}); 15function myData(){ 16 17 //送信のスクリプト 18 19}

複数選択可のチェックボックスも追加になったため、やり方を変えないといけないと思うのですが、
思いつきません。

フォームの仕様について

buttonクリック時に未入力があれば、アラートテキストを<p class="alert"></p>に出します。

また、このHTMLアンケートは内容が変わることもあるそうで、
その都度jsを組み替えないでよいように、あらかじめラジオボタン、チェックボックス、テキストと構成が変更しても対応できるようにしないといけません。

すべてのclass="required"が選択or入力されたかチェックして、その数を照らし合わせるのかなと思ったのですが、それがわからず。

pureでもjQueryでもよいですので、
ご教授いただける方いましたらお願いします。

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

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

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

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

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

m.ts10806

2020/05/13 14:42

</br> ではなく <br />ですね。 ブラウザがうまくやってくれてますが、文法的にはアウトです。
fed

2020/05/13 14:50

修正しました、申し訳ありませんでした。
guest

回答2

0

チェックボックスのチェックされた数を別途で取得して、その数>0であることを条件として分岐してはどうですか?

投稿2020/05/13 14:12

okina

総合スコア471

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

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

fed

2020/05/13 14:42

すみません、理解が及びませんでした。 入力必須のチェックボックスアンケートが一つなら良いのですが、2つ以上増えた場合はどうしたらよいのでしょうか。
okina

2020/05/13 15:09

その分ifを増やす方法もありますが、あまりスマートではないですね。 それぞれのチェックボックスのチェックされている数を全て掛け合わせて、0になったら蹴るとかどうですか? 0が一つでもあればかけると0になるので
退会済みユーザー

退会済みユーザー

2020/05/13 22:37

そもそも各選択肢のどれか1つに checked をつけれるだけでスクリプトなどいらない。
guest

0

ベストアンサー

同じnameでrequiredあったりなかったりはサンプルにしてはよろしくないかと思いますが・・。

チェックボックスの考え方は既にある回答で良いと思います。
ただ、type属性取得してそれによってチェック内容を分岐させた方が良いかと思います。

※ざっと作ったのでかなり冗長で不備があるかもしれません

ひとまず「未入力」「未チェック」に色を付けるようにしてみました。

css

1.text_err{ 2 border:red 1px solid; 3} 4.check_err { 5 color: red; 6}

js

1$(function(){ 2 $('input:button').on('click',function(){ 3 $(".text_err").removeClass("text_err"); 4 $(".check_err").removeClass("check_err"); 5 let err_cnt = 0; 6 $('.required').each(function(i, elem){ 7 let forms = $(elem).children('input,select,textarea'); 8 //全て同じ要素とする 9 let firstElem = $(forms[0]); 10 switch(firstElem.prop("tagName")){ 11 case "INPUT": 12 let type = firstElem.attr("type"); 13 switch(type){ 14 case "text": 15 if(firstElem.val()==""){ 16 firstElem.addClass("text_err"); 17 err_cnt++; 18 } 19 break; 20 case "checkbox": 21 case "radio": 22 let check_cnt = 0; 23 forms.each(function(ri,releme){ 24 if($(releme).prop('checked')){ 25 check_cnt++; 26 } 27 }); 28 if(check_cnt == 0){ 29 $(elem).addClass("check_err"); 30 err_cnt++; 31 } 32 break; 33 } 34 35 break; 36 //1つしかないとする 37 case "TEXTAREA": 38 case "SELECT": 39 if(firstElem.val()==""){ 40 firstElem.addClass("text_err"); 41 err_cnt++; 42 } 43 break; 44 } 45 }) 46 47 if(err_cnt>0){ 48 //省略 49 } 50 }); 51 52});

投稿2020/05/13 15:15

m.ts10806

総合スコア80765

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

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

fed

2020/05/14 00:51

ありがとうございます! textareaやselectまで対応入れていただきまして大変ありがたいです。 まだ私には難しいのですが、教えていただいたこちらを読み解いて今後に生かせるようにします。 勉強になります。ありがとうございました。
m.ts10806

2020/05/14 00:58

動作確認してない部分も多い雑なコードです。 ただ「ロジックが組みやすいhtmlルール」を作るのも設計側の役割です。 あくまで現状のhtmlから起こしましたが、汎用度を高めるならオブジェクトや配列も指定できるdata属性など使ってもいいかもしれません。
fed

2020/05/15 04:50

はい。実際実装するHTMLで今作っており、それに合わせて教えていただいたものを参考に組みなおししております。 今後もありますし、汎用性も備えたもの、そこは何とか頑張ってみます。 やり方や考え方をソースと合わせて教授いただけたので、迷いが少なく、とても助かりました。 ありがとうございました!
m.ts10806

2020/05/15 04:52

何をするにも設計が先です。 htmlを組むのも考えてからです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問