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

ラジオボタン、チェックボックス、テキストエリアが混在し、且つ入力必須任意があるアンケートフォーム画面についてです。
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でもよいですので、
ご教授いただける方いましたらお願いします。

m.ts10806

2020/05/13 14:42

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

Louie

2020/05/13 14:50

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

行動規範の内容に同意します

回答2件

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

投稿2020/05/13 14:12

okina

総合スコア471

Louie

2020/05/13 14:42

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

okina

2020/05/13 15:09

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

退会済みユーザー

2020/05/13 22:37

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

行動規範の内容に同意します

ベストアンサー

同じ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});