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属性。在以下情况下，上述方法可能会更好：

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

Answer 1

尝试使用reportValidity()：

＆＃13;

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;
});

＆＃13;

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

＆＃13;

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

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

1 个答案: