Всплывающее окно начальной загрузки отсутствует, если не выбран обязательный переключатель

Question

У меня есть группа переключателей стиля как часть формы, расположенной под кнопкой отправки. Выбор одной из этих кнопок является обязательным.

Вот так выглядит мой код.

<form class="form-signin" action="" method="post">
         <button class="btn btn-lg btn-primary btn-block" type="submit">Rate!</button>

    <div data-toggle="buttons">
        <div class="btn-group">
            <label class="btn btn-primary"> 
            <input type="radio" name="type" id="type" value="1" class="sr-only" required>1</label>
            <label class="btn btn-primary">
                <input type="radio" name="type" id="type" value="2" class="sr-only" required>2</label>
                <label class="btn btn-primary">
                <input type="radio" name="type" id="type" value="3" class="sr-only" required>3</label>
        </div>
    </div>
    <br>
</form>

Когда я нажимаю кнопку отправки, не нажимая одну из переключателей, я получаю всплывающее сообщение о том, что мне нужно выбрать хотя бы одну из кнопок (как и следовало ожидать). Однако, если эти переключатели не отображаются на том же экране, что и кнопка отправки, и кнопка отправки нажимается без выбора одной из переключателей, экран прокручивается вниз до соответствующего места, но не отображает никаких всплывающих сообщений. Это может быть воспроизведено в this JSFiddle .

У меня вопрос, почему браузер не отображает всплывающее сообщение по умолчанию, если кнопки не отображаются на одном экране, и как я могу изменить свой код, чтобы включить поведение.

Спасибо.