如何仅在表单的所有必填字段都已填写时才更改提交表单按钮值(JS)

<input type="text" name="name" required>

function checkForm() {
  var requiredFields = document.querySelectorAll('input[required]');
  var isFormValid = true;

  for (var i = 0; i < requiredFields.length; i++) {
    if (requiredFields[i].value === '') {
      isFormValid = false;
      break;
    }
  }

  if (isFormValid) {
    document.getElementById('submitBtn').value = '提交表单';
  } else {
    document.getElementById('submitBtn').value = '请填写必填字段';
  }
}

<form onsubmit="checkForm()">
  <!-- 表单字段 -->
  <input type="text" name="name" required>
  <!-- 其他表单字段 -->

  <!-- 提交按钮 -->
  <input type="submit" id="submitBtn" value="请填写必填字段">
</form>