Stop submit until not fill out

My above snippet would work alongside yours without problem… although you could simplify this a lot by also using the constraint validation API. I happened to give an example in another thread only yesterday. :-) E.g. you could add an error class to the invalid element like so:

var form = document.getElementById('my-form')
var submitBtn = form.querySelector('[type="submit"]')

submitBtn.disabled = true

form.addEventListener('input', function (event) {
  var target = event.target

  target.classList.toggle('error', !target.validity.valid)
  submitBtn.disabled = !form.checkValidity()
})
1 Like