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