如何在表单提交之前立即在无线电输入上设置自定义值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在表单提交之前立即在无线电输入上设置自定义值相关的知识，希望对你有一定的参考价值。
我希望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属性。以下方法可能适用于以下情况：
- 无论出于何种原因，您可以编辑javascript但不能编辑html
- 您只想设置自定义的错误消息
答案
尝试使用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>以上是关于如何在表单提交之前立即在无线电输入上设置自定义值的主要内容，如果未能解决你的问题，请参考以下文章
Drupal 7 - 自定义模块：在节点提交中使用自定义表单输入