如何用JS实现仅在表单所有必填字段填写完成后修改提交按钮值

调整思路 #

• 不要绑定提交按钮的click事件，改为监听表单的submit事件：浏览器原生会在触发submit事件前自动校验所有带required属性的字段，只有全部校验通过才会触发该事件，刚好匹配你的需求
• 提交时可同时禁用按钮，避免用户重复点击触发多次提交

调整后的完整代码 #

HTML代码（仅新增了表单ID方便获取，其余逻辑不变） #

<form id="my-form">
    <div>
        <input id="my-file" name="my-file" type="file" accept="image/png, image/gif, image/jpeg" required>
    </div>
    <div>
        <input type="email" value="" name="my_email" required>
    </div>
    <div>
        <input id="visible_submit" type="submit" value="Submit">
    </div>
</form>

JavaScript代码 #

const myForm = document.getElementById('my-form');
const mySubmit = document.getElementById('visible_submit');

myForm.addEventListener('submit', function(e) {
    // 如果你是用AJAX提交表单不需要跳转，可以打开下面这行阻止默认提交行为
    // e.preventDefault();
    mySubmit.value = 'Loading...';
    mySubmit.disabled = true; // 可选配置：禁用按钮防止重复提交
});

无需修改HTML的替代方案 #

如果你不想调整原有HTML结构，也可以手动调用表单校验方法实现需求，直接替换原有JS即可：

const mySubmit = document.getElementById('visible_submit');

mySubmit.addEventListener('click', function() {
    // 自动获取按钮所属的表单
    const belongForm = mySubmit.form;
    // 手动校验所有必填项
    if (belongForm.checkValidity()) {
        mySubmit.value = 'Loading...';
        mySubmit.disabled = true;
    }
});

内容的提问来源于stack exchange，提问作者bohdan bohdan