Safari浏览器datetime-local表单清空值后验证失效问题

在Safari浏览器中使用如下表单时遇到两个异常问题：

• 设置日期后点击「clear」按钮清空值，此时表单本应有效却被判定为无效，同时input元素未被赋予validationMessage；
• 移除表单的novalidate属性后，提交时仅会选中输入框的日期部分，而非触发完整的表单验证流程。

该表单在Chrome浏览器中验证完全正常，请问这是Safari的bug还是遗漏了什么配置？

<form novalidate>
  <input type="datetime-local">
  <button type="button">clear</button>
  <button>Submit</button>
</form>

<script>
const form = document.getElementsByTagName('form')[0]
const input = document.getElementsByTagName('input')[0]
const btn = document.getElementsByTagName('button')[0]

btn.addEventListener('click', function(e) {
  input.value = ''
})

form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  console.log('checkValidity', form.checkValidity())
  console.log('validationMessage', input.validationMessage)
})
</script>

这是Safari浏览器对datetime-local类型输入框的表单验证兼容性bug，和配置无关，核心是Safari在处理该类型输入框的清空操作后，验证逻辑存在实现不一致：

• 手动清空datetime-local输入框的值后，Safari内部会错误地将其标记为“无效状态”，导致form.checkValidity()返回false，但又不会生成对应的validationMessage，这和Chrome等标准实现不符；
• 移除novalidate属性后出现的仅选中日期部分、不触发完整验证的问题，同样是Safari原生验证交互逻辑的bug。

临时规避方案 #

可以通过以下两种方式解决该问题：

1. 清空输入框时手动重置验证状态：

btn.addEventListener('click', function(e) {
  input.value = '';
  // 重置输入框的自定义验证状态
  input.setCustomValidity('');
  // 可选：重置整个表单的验证状态
  form.reset();
});

2. 手动实现表单验证逻辑，替代浏览器原生验证：

form.addEventListener('submit', function(e) {
  e.preventDefault();
  let isValid = true;
  // 自定义空值的验证规则（这里允许空值，可根据需求调整）
  if (!input.value) {
    isValid = true;
    input.setCustomValidity('');
  } else {
    // 非空时使用原生验证逻辑
    isValid = input.checkValidity();
  }
  console.log('checkValidity', isValid);
  console.log('validationMessage', input.validationMessage);
});

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