JS-код неправильно добавляет классы

Question

Мне нужно проверить на валидность поля формы. Если поле заполнено верно, добавить ему класс contact-us__field--valid. Если не верно, то contact-us__field--invalid. С начала загрузки сайта поля не должны иметь ни первого, ни второго класса.

Написал код, он работает правильно:

let userName = document.getElementById('user-name');
let userEmail = document.getElementById('user-email');
let userText = document.getElementById('user-text');

userName.onblur = function() {
  if (userName.validity.valid) {
    userName.classList.remove("contact-us__field--invalid");
    userName.classList.add("contact-us__field--valid");
  } else {
    userName.classList.remove("contact-us__field--valid");
    userName.classList.add("contact-us__field--invalid");
  }
};

userEmail.onblur = function() {
  if (userEmail.validity.valid) {
    userEmail.classList.remove("contact-us__field--invalid");
    userEmail.classList.add("contact-us__field--valid");
  } else {
    userEmail.classList.remove("contact-us__field--valid");
    userEmail.classList.add("contact-us__field--invalid");
  }
};

userText.onblur = function() {
  if (userText.validity.valid) {
    userText.classList.remove("contact-us__field--invalid");
    userText.classList.add("contact-us__field--valid");
  } else {
    userText.classList.remove("contact-us__field--valid");
    userText.classList.add("contact-us__field--invalid");
  }
};

Потом решил заняться рефракторингом. Переписал в такую версию:

let fieldCheck = function(field) {
  if (field.validity.valid) {
    field.classList.remove("contact-us__field--invalid");
    field.classList.add("contact-us__field--valid");
  } else {
    field.classList.remove("contact-us__field--valid");
    field.classList.add("contact-us__field--invalid");
  }
};

userName.onblur = fieldCheck(userName);
userEmail.onblur = fieldCheck(userEmail);
userText.onblur = fieldCheck(userText);

Но она с прогрузки страницы сразу ставит всем полям класс contact-us__field--invalid (хотя фокуса/расфокуса по полям еще не было). Где я промахнулся?

Answer 1

Вы ф-ции вызываете, когда назначаете обработчики. Иными словами, вы в element.onblur присваиваете результат вызова функции, а не саму функцию, поэтому у вас класс добавляется.

Должно быть

element.onblur = (event) => handler(value)

В вашем случае

userName.onblur = () => fieldCheck(userName);
userEmail.onblur = () => fieldCheck(userEmail);
userText.onblur = () => fieldCheck(userText);

Answer 2

Или, такой вариант:

let elems = document.querySelectorAll("#user-name, #user-email, #user-text");
                                    // или уж выдать один общий класс.

elems.forEach(el => el.addEventListener("blur", highlight_invalid));

function highlight_invalid() {
  let is_valid = this.validity.valid;
      
  this.classList.toggle("contact-us__field--valid", is_valid);
  this.classList.toggle("contact-us__field--invalid", !is_valid);
  // this будет ссылаться на элемент, для которого сработал blur
};

БЛОГ НА HUSL

JS-код неправильно добавляет классы

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