HTML атрибут событий oninvalid

Значение и применение

Атрибут событий oninvalid позволяет задать срабатывание скрипта, когда отправляемый элемент формы был проверен и не удовлетворяет ограничениям формы (например, не заполнено обязательное поле - атрибут required).

Поддержка браузерами

Спецификации: multipage, multipage

Поддерживается во всех основных браузерах с 2018 года.

Показать браузеры
Совместимостьapi.HTMLInputElement.invalid_event
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
invalid event✓10✓12✓4✓10✓5✓18✓64✓12✓5✓4.0✓4✓5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибут событий oninvalid не поддерживается браузерами Safari и Internet Explorer 9.0 (и ниже).

Синтаксис

HTML
<element oninvalid = "script" >

Событие не всплывает и возникает отдельно на каждом недопустимом поле при проверке, включая checkValidity() и reportValidity(). Для обработки на форме задайте capture: true. При неудачной встроенной проверке отправки событие submit не возникает.

Проверка до submit

Нажмите ▶. Попробуйте отправить пустое поле, затем заполненное. Кнопка с formnovalidate пропускает проверку; обработчик submit отменяет сетевую отправку.

index.html
HTML
<form id="order">
  <p>
    <label>Имя: <input id="customer" name="customer" required /></label>
  </p>
  <button type="submit">Проверить и отправить</button>
  <button type="submit" formnovalidate>Пропустить проверку</button>
</form>
<pre id="log" aria-live="polite">Журнал событий:</pre>
main.js
JavaScript
const form = document.getElementById('order')
const log = document.getElementById('log')
// invalid не всплывает: слушаем его в фазе захвата.
form.addEventListener(
    'invalid',
    (event) => {
        log.textContent += '\ninvalid: ' + event.target.name
    },
    true
)
form.addEventListener('submit', (event) => {
    event.preventDefault()
    log.textContent += '\nsubmit: ' + event.submitter.textContent + ' (сетевая отправка отменена)'
})

Примеры, попробуйте сами

Проверка обязательного поля

Нажмите ▶. Попробуйте подтвердить форму с недопустимым значением.

index.html
HTML
<form method="get">
  Нажмите отправить: <input type="text" name="info" required="" />
  <input type="submit" value="Отправить" />
</form>
main.js
JavaScript
function testFunction() {
    alert('Вы не заполнили обязательное поле!')
}

document.querySelector('input[required]').addEventListener('invalid', testFunction)

Отличия HTML 4.01 от HTML 5

Атрибут событий oninvalid является новым в HTML5.

Где возникает событие

Событие возникает у проверяемых элементов формы, включая <input>, <select> и <textarea>.