Javascript HTML表单-必填字段-了解必填字段是否已通过编程完成

我有一个页面，当点击一个按钮时会加载一个正在加载的gif。如果输入了所需的文本，则可以正常工作

如果未输入所需的文本，浏览器将指示文本丢失，但加载的gif仍会生效

有没有办法让js知道一个必填字段尚未完成，这样我就可以停止显示加载的gif了

我有：

如下所示的HTML表单：

<form action="...">
    <input type="text" required>
    <button>Submit</button>
</form>

$("button").click (function(){          
    // Display a loading gif;
});

$("button").click (function(){
    if (all required fields are complete) {
        // Display a loading gif;
    }
});

 $('input').filter('[required]')

我想要的是这样的东西：

<form action="...">
    <input type="text" required>
    <button>Submit</button>
</form>

$("button").click (function(){          
    // Display a loading gif;
});

$("button").click (function(){
    if (all required fields are complete) {
        // Display a loading gif;
    }
});

 $('input').filter('[required]')

---

有什么想法吗？

在如下字段上使用过滤器如何：

<form action="...">
    <input type="text" required>
    <button>Submit</button>
</form>

$("button").click (function(){          
    // Display a loading gif;
});

$("button").click (function(){
    if (all required fields are complete) {
        // Display a loading gif;
    }
});

 $('input').filter('[required]')

函数检查输入（）{
var isValid=true；
$（'input'）.filter（'[required]'）。每个（函数（）{
if（$（this.val（）=''）{
$（“#确认”）.prop（'disabled'，true）
isValid=false；
返回false；
}
});
if（isValid）{$（'#confirm'）.prop（'disabled'，false）}
返回有效；
}
$（'#确认'）。单击（函数（）{
警报（检查输入（））；
});
//根据输入是否已填充启用或禁用按钮
$（'input'）.filter（'[required]'）。在（'keyup'，function（）上{
检查输入（）
})
检查输入（）

检查

感谢您的回答，但如果页面上有其他按钮与其他按钮一起使用，而这些按钮不依赖于要选择的字段，则此选项不起作用。页面上有许多字段，您的代码查看页面上的所有字段，而不仅仅是单击按钮的表单中的字段。我使用js检查单击按钮的名称，对其进行了排序。