未选择必选单选按钮时，缺少引导弹出窗口

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中复制。

我的问题是，如果按钮在同一屏幕上不可见，为什么默认情况下浏览器不显示弹出消息，以及如何更改代码以启用行为。

谢谢。