<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()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.