如何将样式与所需属性一起添加到输入字段？

Question

目前，如果具有required属性的输入字段为空，则会显示浏览器的默认错误消息。如果我删除此属性，由于我的JavaScript代码，它将在输入字段上显示红色边框。我如何同时显示两者？

function validate() {
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 300);
  }
}

.error {
  border: 1px solid red;
}

<form onsubmit="return validate();">
  <input type="text" id="title" required>
  <input type="submit">
</form>