如何仅在填写表单的所有必填字段时更改提交表单按钮的值（JS）

Question

我想使用 JAVA SCRIPT 将提交表单按钮的值更改为“正在加载...”，前提是表单中的所有必填字段都已填写。请帮忙。谢谢！！！

<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>

<script type="text/javascript">
var mySubmit = document.getElementById("visible_submit");
mySubmit.onclick = function addLoading() { document.getElementById("visible_submit").setAttribute("value", "Loading...");};

Answer 1

不要监听提交按钮上的 click 事件，而是监听表单上的 submit 事件。

使用checkValidity()检查用户是否填写了所有必填字段，Event.preventDefault()防止表单提交：

var mySubmit = document.getElementById("visible_submit");
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  if (form.checkValidity()) {
    document.getElementById("visible_submit").value = "Loading...";
  }
  e.preventDefault();
})

<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>

如何仅在填写表单的所有必填字段时更改提交表单按钮的值（JS）

How to change value of Submit form button only if all required fields of the form are filled in (JS)

javascript

form-submit