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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

HTML

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

Q&A

解決済

HTML5のフォームバリデーション:selectタグのrequired属性の対応ブラウザについて

otdsh9432
otdsh9432

総合スコア55

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

HTML

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

3回答

1グッド

3クリップ

402閲覧

投稿2022/10/20 06:42

編集2022/10/20 10:53

前提

インターネットから誰でもアクセスできる一般向けWebアプリケーションを開発しています。
その中で、ユーザに回答してもらうフォームをHTMLで作成しており、
HTML5のバリデーションを使って必須項目の入力チェックを行っています。

発生している問題

フォーム内のとある項目にselectタグのrequired属性を付けて、必須回答項目としています。(仮で「社会人ですか?」とします)
大半のユーザからは回答をもらっているのですが、先日、1人のユーザだけその項目のみ回答なしでのフォーム送信がありました。(その他の必須項目はちゃんと入力済となっており、送信処理自体も正常完了している状態。特にエラー等もありません)
必須項目としていてバリデーションがあるのに、なぜ入力なしで送信してこれたのか、不明な状態です。

該当のソースコード

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
  • 上記2つの異なる情報が出てきている状況です。
  • mozillaの方が信頼性高いと思うので前者のサイトは間違いなのかな?と思いつつ、サイトの見方が間違っている可能性もあるので、一度お伺いした次第です。

何か情報を持っておられる方や、調査先のサイトが(見方も含めて)適切かどうかなど、もしわかれば、お伺いしたいと考えています。
該当ユーザが特殊なブラウザ設定をしてしまっている可能性も考えられなくはないため、はっきりとした答えを得ることは難しいかもしれませんが、何か少しでもわかることがあれば、参考にしたいと考えています。
(フロントエンドは特に経験薄いため「対応ブラウザを正確に知ることは実は難しいよ」的なご回答でも大丈夫です)
お手数をお掛けしますが、どうぞよろしくお願いいたします。

※こちらからお伺いしておきながら大変恐縮ですが、解決方法については別途検討したいと考えており、ここでは一旦、タイトル通りの「selectタグのrequired属性の対応ブラウザの調べ方」についてお伺いできればと考えております。

調査したこと

  • Webサーバのログ(NginxのUserAgentログ)によると該当ユーザのブラウザは、 iOS 15.6 Safari 15.6 のiPhoneを使用されているようです。
  • アプリケーションログによると、該当の処理においては、フォームPOST時の送信パラメータに「社会人ですか?」の項目は含まれていなかったため、バックエンド側の問題でなく、そもそもユーザが未入力であったと想定しています。
  • 一般ユーザかつiPhoneなので、Dev tool等でフォーム改変した等は考えづらいかなと思っています。

補足情報(FW/ツールのバージョンなど)

HTML5

Cocode👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

8

とりあえず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

yambejp

総合スコア109062

spoofy_dragon😄を押しています
spoofy_dragon, otdsh9432👍を押しています
spoofy_dragon❤️を押しています
spoofy_dragon😍を押しています
spoofy_dragon👏を押しています
spoofy_dragon🎉を押しています
spoofy_dragonを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

4

開発者ツールを使えばhtmlは改ざん可能です。
手元にiOS端末がないので確認できませんがiPhoneでも開発者ツール使えるみたいなので
https://www.boost-on.net/3944
理論上は可能です。

ただ、やはりこういうことがあるので、バリデーションはサーバーサイド必須です。

投稿2022/10/20 06:59

m.ts10806

総合スコア80030

hayato7, miyabi_takatsuk, Cocode, maisumakun👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

otdsh9432

2022/10/20 07:06

ご回答ありがとうございます!サーバーサイドのバリデーションについても検討するように致します!

1

ベストアンサー

  • ただ、以下サイトにはsafari 15.6が「対応していない」旨が確認できました。
    https://caniuse.com/?search=required
    上記サイト内のHTML element: select: required の項目

対応していないとは書かれていないようです。「灰色」は「未調査」を意味します。

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

arcxor

総合スコア2141

otdsh9432👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

otdsh9432

2022/10/20 14:05

詳細にご回答いただきありがとうございます。対応ブラウザの調べ方について理解が深まりました。 caniuseの灰色は未調査であること、MDNであっても一部誤った情報もあること(こちらは貴重な情報で、ありがとうございます。。)、承知いたしました。 実機でも試していただきありがとうございます。 一旦、browserstackでも試してみたいと思います。
otdsh9432

2022/10/22 11:15

browserstackで試してもselectのrequiredは機能しているようで、問題自体は解決してなさそうではありますが、 対応ブラウザの調査方法への理解を深めることができたので、当質問はクローズとさせていただこうと思います。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

HTML

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