关于form表单中button的自动跳转一级input的required冲突

背景：在form表单中添加button会自动提交表单并跳转刷新网页，在input这个元素添加required会检测是否为空，但是如果给button返回false，就不会跳转了但是随之input的required也会失效，怎么在既不让它跳转并且还可以检测是否为空？

demo


  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 如果 action="JavaScript:;"这样写可以在一定情况下解决问题
    但是如果这个页面需要往另一个页面发送 ajax请求就也还是会刷新页面
    -->
    <form action="JavaScript:;">
        测试： <input required type="text">
        <button id="btn">提交</button>
    </form>
    <script>
        let btn = document.querySelector('#btn')
        btn.onclick = function () {
            // 如果写 return 就会干掉自动检测为空
            console.log(1)
            // return false
        }
    </script>
</body>

</html>

···html

实在不行，那就不用form表单提交呗，改用jq的ajax提交