ラジオボタンが未選択のときにアラートを出す。

質問させていただきます。
webページでアンケートを実施しようとしているのですが，
ブラウザのせいなのかsafariではrequiredが反応しません。

そのため，JavaScriptにてラジオボタンの入力チェックを行いたいのですが，
下記のようにsubmitをしたときにラジオボタンの両方が未入力だったときにアラートが出るのですが、片方の場合はそのまま送信されてしまいます。

どのようにすると良いでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8</head>
9<body>
10    <form name="SelfReport" action="#" onSubmit="return formCheck()" method="post">
11        <div>
12            <p>第一問</p>
13            <p id="Q1" style="display:none; color:red">【選択肢を選択してください】</p>
14            <input type="radio" name="q1">A1
15            <input type="radio" name="q1">B1
16            <input type="radio" name="q1">C1
17            <input type="radio" name="q1">D1
18        </div>
19    
20        <div>
21            <p>第二問</p>
22            <p id="Q2" style="display:none; color:red">【選択肢を選択してください】</p>
23            <input type="radio" name="q2">A1
24            <input type="radio" name="q2">B1
25            <input type="radio" name="q2">C1
26            <input type="radio" name="q2">D1
27        </div>
28        <br/>
29        <input type="submit" value="回答送信"/>
30    </form>
31
32<script>
33    function formCheck(){
34        let flag = false;
35        for(let i = 0; i<document.SelfReport.q1.length; i++){
36            if(document.SelfReport.q1[i].checked){
37                flag = true;
38                document.getElementById("Q1").style.display="none";
39            }else{
40                document.getElementById("Q1").style.display="block";
41            }
42        }
43        for(let i = 0; i<document.SelfReport.q2.length; i++){
44            if(document.SelfReport.q2[i].checked){
45                flag = true;
46                document.getElementById("Q2").style.display="none";
47            }else{
48                document.getElementById("Q2").style.display="block";
49            }
50        }
51
52        if(flag === false){
53            alert("未入力箇所を入力下ください");
54            return false;
55        }else{
56            return true;
57        }
58    }
59
60</script>
61
62</body>
63</html>

t.o_325

2019/11/25 09:11

ありがとうございます。実は、今回は2問しか書きませんでしたが、50問くらいって、その中で十数問の未入力チェックをするとしたら、一つずつ見るしかないでしょうか？

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

回答1件

Can I use によれば使えるようですがどうなんでしょうね？たまに間違えていることもあるので100%信用できませんが
https://caniuse.com/#feat=mdn-api_htmlinputelement_required

一つずつ見ていってもいいのですが、今回の場合チェックされている数を数えればいいのでこれで十分かもしれません。

JavaScript
1document.SelfReport.querySelectorAll(':checked').length < 2

https://developer.mozilla.org/ja/docs/Web/API/Element/querySelectorAll
https://developer.mozilla.org/ja/docs/Web/CSS/:checked

投稿2019/11/25 08:35

x_x

総合スコア13749

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

ラジオボタンが未選択のときにアラートを出す。

関連した質問