Q&A
ご回答ありがとうございます！サーバーサイドのバリデーションについても検討するように致します！
前提
インターネットから誰でもアクセスできる一般向けWebアプリケーションを開発しています。
その中で、ユーザに回答してもらうフォームをHTMLで作成しており、
HTML5のバリデーションを使って必須項目の入力チェックを行っています。
発生している問題
フォーム内のとある項目にselectタグのrequired属性を付けて、必須回答項目としています。（仮で「社会人ですか？」とします）
大半のユーザからは回答をもらっているのですが、先日、１人のユーザだけその項目のみ回答なしでのフォーム送信がありました。（その他の必須項目はちゃんと入力済となっており、送信処理自体も正常完了している状態。特にエラー等もありません）
必須項目としていてバリデーションがあるのに、なぜ入力なしで送信してこれたのか、不明な状態です。
該当のソースコード
html
1<h3>社会人ですか？</h3> 2<select class="***" name="***" id="***" required> 3 <option value>選択してください</option> 4 <option value="yes">はい</option> 5 <option value="no">いいえ</option> 6</select>
お伺いしたいこと
- ブラウザの問題もあるかもと思い、色々と調べてみましたが、明確な答えを見つけることはできませんでした。
- ただ、以下サイトにはsafari 15.6が「対応していない」旨が確認できました。
https://caniuse.com/?search=required
上記サイト内のHTML element: select: requiredの項目 - しかし、mozillaのドキュメントを参照すると、Safariは
Full Supportと出てきました。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#browser_compatibility - 上記２つの異なる情報が出てきている状況です。
- mozillaの方が信頼性高いと思うので前者のサイトは間違いなのかな？と思いつつ、サイトの見方が間違っている可能性もあるので、一度お伺いした次第です。
何か情報を持っておられる方や、調査先のサイトが（見方も含めて）適切かどうかなど、もしわかれば、お伺いしたいと考えています。
該当ユーザが特殊なブラウザ設定をしてしまっている可能性も考えられなくはないため、はっきりとした答えを得ることは難しいかもしれませんが、何か少しでもわかることがあれば、参考にしたいと考えています。
（フロントエンドは特に経験薄いため「対応ブラウザを正確に知ることは実は難しいよ」的なご回答でも大丈夫です）
お手数をお掛けしますが、どうぞよろしくお願いいたします。
※こちらからお伺いしておきながら大変恐縮ですが、解決方法については別途検討したいと考えており、ここでは一旦、タイトル通りの「selectタグのrequired属性の対応ブラウザの調べ方」についてお伺いできればと考えております。
調査したこと
- Webサーバのログ（NginxのUserAgentログ）によると該当ユーザのブラウザは、
iOS 15.6 Safari 15.6のiPhoneを使用されているようです。 - アプリケーションログによると、該当の処理においては、フォームPOST時の送信パラメータに「社会人ですか？」の項目は含まれていなかったため、バックエンド側の問題でなく、そもそもユーザが未入力であったと想定しています。
- 一般ユーザかつiPhoneなので、Dev tool等でフォーム改変した等は考えづらいかなと思っています。
補足情報（FW/ツールのバージョンなど）
HTML5
回答3件
0
とりあえずuser-agentを採取するのが妥当でしょう
相手が意図的に対処していなければ環境を参照することができます
javascript
1<script> 2window.addEventListener('formdata', e=>{ 3 e.formData.append('ua',navigator.userAgent); 4}); 5</script> 6<form> 7<select name="hoge" required> 8 <option value>選択してください</option> 9 <option value="yes">はい</option> 10 <option value="no">いいえ</option> 11</select> 12<input type="submit" value="send"> 13</form>
投稿2022/10/20 06:58
総合スコア116443
0
開発者ツールを使えばhtmlは改ざん可能です。
手元にiOS端末がないので確認できませんがiPhoneでも開発者ツール使えるみたいなので
https://www.boost-on.net/3944
理論上は可能です。
ただ、やはりこういうことがあるので、バリデーションはサーバーサイド必須です。
投稿2022/10/20 06:59
総合スコア80875
0
ベストアンサー
- ただ、以下サイトにはsafari 15.6が「対応していない」旨が確認できました。
https://caniuse.com/?search=required
上記サイト内のHTML element: select: requiredの項目
対応していないとは書かれていないようです。「灰色」は「未調査」を意味します。
- しかし、mozillaのドキュメントを参照すると、Safariは
Full Supportと出てきました。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#browser_compatibility- 上記２つの異なる情報が出てきている状況です。
caniuse では、MDN のデータを用いて対応表を表示しているケースがあります。
https://caniuse.com/mdn-html_elements_select_required
は MDN の browser-compat-data を用いて表示されています。
- mozillaの方が信頼性高いと思うので前者のサイトは間違いなのかな？と思いつつ、サイトの見方が間違っている可能性もあるので、一度お伺いした次第です。
Mozilla の方が信頼性が高いと思うのは早計です。MDN の browser-compat-data はしばしばいい加減で間違った情報が登録されていますので、あまり信用しすぎないようにしてください。（MDN BCDの多くの情報が正確を期すようにメンテナンスされていますが、一部の情報に誤りがあるのは事実です）
ところで、実機の iPhone で iOS 15.6 Safari の動作確認をしてみました。
iOS 15.6 の iOS Safari であれば、select 要素の required は機能しているようでした。
「selectタグのrequired属性の対応ブラウザの調べ方」についてお伺いできればと考えております。
すでに実施されているように、caniuse の対応表を見るのが基本的な調べ方ですが、灰色になっていたりする場合は caniuse のそのバージョンの部分をクリックすることで、browserstack を呼び出してブラウザ上でテストすることができます。（メールアドレスの登録が必須ですが、無料で何回か試せるようです。）
ここまで書きましたが、私自身、Safari on iOS における「select 要素の required 属性」のサポート時期を正確に調べられていません。（あなたと同じ状況です）
MDN の BCD が yes となっているのも初期バージョンから本当に対応しているのか怪しいものです。対応していない iOS のバージョンが見つけられれば、MDN の BCD リポジトリへ Issue を投げることができるのですが。
投稿2022/10/20 11:45
総合スコア2857
詳細にご回答いただきありがとうございます。対応ブラウザの調べ方について理解が深まりました。
caniuseの灰色は未調査であること、MDNであっても一部誤った情報もあること（こちらは貴重な情報で、ありがとうございます。。）、承知いたしました。
実機でも試していただきありがとうございます。
一旦、browserstackでも試してみたいと思います。
browserstackで試してもselectのrequiredは機能しているようで、問題自体は解決してなさそうではありますが、
対応ブラウザの調査方法への理解を深めることができたので、当質問はクローズとさせていただこうと思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/10/20 07:09