Сокращение объема кода и оптимизация кода обработчиков событий при валидации формы

Question

Мне нужно, проводить валидацию полей формы обратной связи, всего их 4 штуки.(name,email,phone,message) Делать это необходимо:

непосредственно при вводе пользователем
при снятии фокуса с поля инпута.

Проверка полей осуществляется через регулярные выражения и плюсом к этому проверяется на пустоту при помощи функции validateInput.

function validateInput(value,regexp){
    return regexp.test(value);
}
name = document.getElementById('name');
name.addEventListener('input',function({
let NAME_REGEXP= /^([a-zA-ZA-Яа-я '-]+$/;
if(!validateInput(name.value,NAME_REGEXP) || this.value.length===0){
name.classList.add('error')
}
else {
name.classList.remove('error')
}
});

name.addEventListener('focusout',function({
let NAME_REGEXP= /^([a-zA-ZA-Яа-я '-]+$/;
if(!validateInput(name.value,NAME_REGEXP) || this.value.length===0){
name.classList.add('error')
}
else {
name.classList.remove('error')
}
});

Сейчас у меня получается очень много повторяющегося кода, так как мне необходимо выполнять одни и те же проверки с теми же условиями, но при наступлении разных событий (input и focusout).

Код, приведенный на скриншоте, выполняет нужное мне поведение только для одного поля, а у меня их 4.

Можно ли все это сделать более лаконичным и чтобы не было настолько много повторяющегося кода без jQuery?

Answer 1

А стандартных средств валидации формы вам не достаточно?

let inputs = document.getElementsByClassName('check');

Array.from(inputs).forEach(function(el,idx){
  let check = el => el.target.checkValidity();      
  el.addEventListener('input', check);
  el.addEventListener('focusout', check);
});

.check { border-width: 3px; }
.check:focus { outline: none; }
.check:valid   { border-color: green; }
.check:invalid { border-color: red; }

<input class="check" pattern="\d+"/>
<input class="check" pattern="\d+"/>
<input class="check" pattern="\d+" required/>

БЛОГ НА HUSL

Сокращение объема кода и оптимизация кода обработчиков событий при валидации формы

Ответы (1 шт):