スマホ表示でラジオボタンのrequiredが機能しない

Question

前提・実現したいこと

縦に長いスマホ用Formで、無記入箇所がある場合にsubmitを押したらエラー箇所に戻るようにしたいです。

発生している問題

html5のrequiredでFormの必須入力を指定しています。
通常、requiredを記載したらsubmitで最初のエラー箇所を表示するようですが、今回ラジオボタンのところだけ効きません。
下記ソースコードで、textが無記入の場合は正常にエラー箇所が表示されますが、radioの選択肢を選択していない場合は送信ボタンの場所から動きませんでした。
自力で戻ると、エラー時のハイライトが出ていたので反応はしているようです。

該当のソースコード

<h3>問題文</h3>

<p>答え</p>
<div>
<label for="sentaku1a"><input name="sentaku1" type="radio" id="sentaku1a" value="A" required> 選択肢A </label>
<label for="sentaku1b"><input name="sentaku1" type="radio" id="sentaku1b" value="B"> 選択肢B </label>
<label for="sentaku1c"><input name="sentaku1" type="radio" id="sentaku1c" value="C"> 選択肢C </label>
</div>

<p>答えの理由</p>
<input value="" type="text" name="riyuu" required>

<!-- 以下繰り返し -->

<input name="owari" type="image" src="sousin.jpg" alt="送信する" id="submitbutton">

/* 選択肢の横並び */
div{
    display:table;
    width:100%;
    }

label{
    display:table-cell;
    }

試したこと

iPhoneX Safari/Chorome で検証
labelの位置を変えたり削除してみましたが変わりませんでした。

原因が分からないため、解決方法を教えてほしいです。

Answer 1

画面外の要素がバリデーションNGだったとき、そこに自動的にジャンプ（スクロール）させたいということですね。
html5のrequiredでのバリデーションって、そこは規定されているのでしょうかね。
私もわからないので調べてみましたが、そんな規定は見当たりませんでした。
ブラウザによるのだとしたら、そこは頼るわけにはいかないですよね。
確実にスクロールさせたいなら自力でやるしかないのでは？という気がします。
で、ちょっと検索してみたら、jQuery-Validation-Engineというのがありました。
導入を検討されてはいかがでしょうか。
https://github.com/posabsolute/jQuery-Validation-Engine

Comments

[halhalYam]

コメントが遅くなりすみません。ご回答ありがとうございます。
ブラウザの仕様ということもあるんですね。
jQueryのご紹介もありがとうございました。

Answer 2

formタグを忘れているからです。

Comments

[halhalYam]

ご回答ありがとうございます。
記載のソースコードにはありませんでしたが、実際のコードには入っていました。
記入漏れがあり申し訳ないです。