要解决“必填属性在表单上不起作用，而e.preventDefault在提交按钮上不起作用”的问题，可以使用以下代码示例中的解决方法：

HTML代码示例：

  
  提交

JavaScript代码示例：

document.getElementById("myForm").addEventListener("submit", function(e) {
  var form = e.target;

  // 检查必填属性是否起作用
  if (!form.checkValidity()) {
    // 如果必填属性不起作用，则阻止表单提交
    e.preventDefault();

    // 标记未填写的必填字段
    var inputs = form.querySelectorAll("[required]");
    for (var i = 0; i < inputs.length; i++) {
      if (!inputs[i].validity.valid) {
        inputs[i].classList.add("error");
      }
    }
  }
});

document.getElementById("submitButton").addEventListener("click", function(e) {
  var form = document.getElementById("myForm");

  // 检查必填属性是否起作用
  if (!form.checkValidity()) {
    // 如果必填属性不起作用，则阻止按钮点击事件
    e.preventDefault();

    // 标记未填写的必填字段
    var inputs = form.querySelectorAll("[required]");
    for (var i = 0; i < inputs.length; i++) {
      if (!inputs[i].validity.valid) {
        inputs[i].classList.add("error");
      }
    }
  }
});

CSS代码示例：

.error {
  border: 2px solid red;
}

这个代码示例中，我们首先给表单元素添加了required属性，以便验证必填字段。然后，通过JavaScript代码，我们为表单的submit事件和提交按钮的click事件添加了事件监听器。在事件监听器中，我们首先检查表单的checkValidity()方法来判断必填属性是否起作用。如果必填属性不起作用，则使用e.preventDefault()阻止表单提交或按钮点击事件。然后，我们标记未填写的必填字段，通过添加一个CSS类名来改变它们的样式。

这样，当用户未填写必填字段时，表单提交或按钮点击事件将被阻止，并且未填写的必填字段将被标记为错误。