Как при отправке формы получить незаполненные поля отмеченные атрибутом required с помощью js

Question

Есть форма, с несколькими полями, разбросанными по нескольким вкладкам. Введенные данные проверяются штатными средствами html, обязательные поля помечены атрибутом required.

Если пользователь на одной из вкладок не заполнил обязательное поле, и ушел на др. вкладку, то при нажатии кнопки форма естественно не отправляется, но т.к. пользователь находится на другой вкладке, он не видит штатного сообщения о незаполненном поле.

Как при отправке формы получить тот элемент, на который указывает штатная система валидации (пустое поле с атрибутом required)?

Answer 1

Как при отправке формы получить незаполненные поля отмеченные атрибутом required

Например вот так...

document.querySelector('button').addEventListener('click', e => {
  e.preventDefault()
  const of = e.target.closest('form')
  const a = [...of.querySelectorAll('[required]')].filter(o => !o.value).map(o => o.name)
  if (!a.length) return
  console.log('Не заполнены поля', a.join(', '))
})

[required] {
  border-color: green;
}

<form>
  <input name='fld1' required />
  <input name='fld2' />
  <input name='fld3' />
  <input name='fld4' required />
  <br />
  <button>Тест</button>
</form>

БЛОГ НА HUSL

Как при отправке формы получить незаполненные поля отмеченные атрибутом required с помощью js

Ответы (1 шт):