Q&A
ありがとうございます。
実は、今回は2問しか書きませんでしたが、50問くらいって、その中で十数問の未入力チェックをするとしたら、一つずつ見るしかないでしょうか？
質問させていただきます。
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>
回答1件
0
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
総合スコア13749
あなたの回答
tips
プレビュー
