Как выводить свои сообщения для формы при неправильном заполнении полей?

Хочу сделать собственную валидацию формы, чтобы выводились мои сообщения, а не дефолтные браузера. Есть такой код:

let contactForm  = document.getElementById('contact-form');
let inputs = contactForm.querySelectorAll('.contact-us__field');
let errorInputMessage = document.createElement("p");
errorInputMessage.classList.add("contact-us__field-error-message");
errorInputMessage.textContent = "Please, fill the field correctly";

Когда пользователь отправляет форму, я хочу проверить поля. Если они заполнены неправильно, то под каждым таким полем выводить сообщение (errorInputMessage). Пока у меня такой код:

contactForm.addEventListener('submit', function (event) {
  console.log("Маркер-сообщения отправки формы");
  event.preventDefault()
  for(input of inputs) {
    if (!input.validity.valid) {
      this.after(errorInputMessage);
    }
  }
});

Он не рабочий. Суть в том, что даже консольное сообщение не выводится. Событие submit для формы не срабатывает. Но железно выводится сообщение браузера.

Вопросы:

1. Как мне отловить дефолтное сообщение браузера, если это даже не отправка формы?
2. Как мне пройтись по списку всех полей? Такая коллекция (input of inputs) не рабочая. Даже если код сработает, мое сообщение применится только к последнему полю, а мне нужно к каждому.
3. Пожалуйста, накидайте ссылок как бороться с дефолтом хрома, и в принципе о собственной js-валидации форм.