如何在表单提交之前立即在无线电输入上设置自定义有效性

Question

我想在提交表格之前立即setCustomValidity输入。这似乎是合乎逻辑的方法：

document.querySelector('form').addEventListener('submit', function(e) {
var button = e.currentTarget.querySelector('input[type="radio"]');
button.setCustomValidity('You did it wrong.');
console.log(button.willValidate);  // true
console.log(button.checkValidity());  // false
// Open Dev Tools to see output
debugger;
});

<form>
<label for="radio">
<input id="radio" type="radio">
Radio button
</label>
<br>
<input type="submit">
</form>

尽管设置了自定义错误，表单仍会继续提交。我是否需要处理其他事件，在浏览器决定完成验证处理之前发生的事件？

我意识到我可以使用required属性。上述方法可能更适合以下情况：

1. 无论出于何种原因，您都可以编辑JavaScript，但不能编辑HTML
2. 您只想设置自定义错误消息

Answer 1

尝试使用 reportValidity((：

document.querySelector('form').addEventListener('submit', function(e) {
// prevent the default action first
e.preventDefault();
var button = e.currentTarget.querySelector('input[type="radio"]');
button.setCustomValidity('You did it wrong.');
button.reportValidity();
//console.log(button.willValidate);  // true
//console.log(button.checkValidity());  // false
// Open Dev Tools to see output
//debugger;
});

<form>
<label for="radio">
<input id="radio" type="radio">
Radio button
</label>
<br>
<input type="submit">
</form>

在submit事件中不检查有效性，因为根据设计，如果表单无效，则不会触发submit- 而是触发invalid事件。因此，您必须手动停止submit事件并强制重新验证(或至少报告验证(。