Как установить CustomValidity на радиовходе непосредственно перед отправкой формы

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 и принудительно выполнить повторную проверку (или хотя бы сообщить о проверке).