Принимая во внимание этот пример кода, почему при отправке формы в iOS Safari / Chrome браузер не прокручивает страницу вверх и показывает ошибку проверки на требуемых переключателях?
Это работает, как и ожидалось, в поле ввода текста, а также в настольных версиях этих браузеров и на Android.
Если текстовое заполнение удалено, чтобы укоротить страницу, чтобы поля поместились в области просмотра, появится сообщение проверки.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Radio Test</title>
</head>
<body>
<p>iOS Safari/Chrome does not scroll the page/focus on required radio or checkbox input fields when submitting the form. It does however do this on text fields.</p>
<form>
<fieldset>
<legend>Select an option (required)</legend>
<p>
<label for="a">A</label>
<input name="a" type="radio" value="a" id="a" required>
<label for="b">B</label>
<input name="a" type="radio" value="b" id="b" required>
</p>
</fieldset>
<fieldset>
<legend>Enter a value (required)</legend>
<p>
<label for="c">C</label>
<input name="c" type="text" id="c" required>
</p>
</fieldset>
<div id="padding">
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
</div>
<p><button>Submit</button></p>
</form>
<p>
<a href="#" onclick="document.getElementById('padding').style.display='none';return false">Hide padding</a> |
<a href="#" onclick="document.getElementById('padding').style.display='block';return false">Show padding</a>
</p>
</body>
</html>
Я сообщил об ошибке в Apple через их страницу отчетов об ошибках Safari / страницу обратной связи, но я не уверен, что это правильное место, чтобы сообщить об этом.