<form id='form'>
  <label>Имя<input type="text"></label>
  <label>Фамилия<input type="text"></label>
  <label>Город<input type="text"></label>
  <button id='btn'>Отправить</button>
</form>
.error{
  border-color: red;
  }
let container = document.getElementById('form')
let input = form.getElementsByTagName('input')
const valid = function () {
    container.addEventListener('click', function (e) {
        e.preventDefault()
        let not = false
        if (e.target === document.getElementById('btn')) {
            for (let i = 0; i < input.length; i++) {
                if (input[i].value) {
                    input[i].classList.remove('error')
                } else if (!input[i].value) {
                    input[i].classList.add('error')
                    not = true;
                }
            }
            if (!not) console.log('отправить')
        }
    })
}
valid()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.