Как удалить класс после обнуления инпута JS

Рейтинг: 0Ответов: 1Опубликовано: 15.02.2023

Делаю форму для кредитной карты. Библиотека payment определяет банк по номеру карты, подключаю картинки. Хочу навесить соответствующий бэкграунд, по дефолту серый цвет у карты. Как удалить бэкграунд, если инпут после ввода цифр очистить? Сейчас этот класс остается и меняется если только ввести номер карты другого банка.

cardNumber.addEventListener('blur', (e) => {
  if (e.target.value.trim() === '') return;

  const nameByNumber = getCreditCardNameByNumber(e.target.value);

  if (nameByNumber === 'Credit card is invalid!') {
    cardNumber.classList.add('not-valid');
    cardNumber.classList.remove('is-valid');
    logoCard.src = '';
  } else if (nameByNumber === 'Visa') {
    cardNumber.classList.remove('not-valid');
    cardNumber.classList.add('is-valid');
    card.classList.add('visa');      // добавляю новый класс с другим бэкграундом
    logoCard.src = Visa;
  } else if (nameByNumber === 'MasterCard') {
    cardNumber.classList.remove('not-valid');
    cardNumber.classList.add('is-valid');
    card.classList.add('mastercard');
    logoCard.src = MasterCard;
  } else if (nameByNumber === 'Maestro') {
    cardNumber.classList.remove('not-valid');
    cardNumber.classList.add('is-valid');
    card.classList.add('maestro');
    logoCard.src = Maestro;
  } else {
    alert('Ваша карта не поддерживается');
    cardNumber.classList.add('is-valid');
  }
  // eslint-disable-next-line no-use-before-define
  checkValid();
});
javascript input form платежи
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Если надо при пустом вводе удалять нужный класс, то можно просто это обрабатывать в вашем первом if заменив его вот так

cardNumber.addEventListener('blur', (e) => {
  if (!e.target.value.trim()) {
    // Или другой нужный вам класс
    cardNumber.classList.remove('is-valid');
    logoCard.src = ''
    return;
  };
  // Остальной ваш код
}

Так же можно вписать эти проверки в общий код и убрать дублирование кода

cardNumber.addEventListener('blur', (e) => {

  function setValid(name, logo) {
    cardNumber.classList.remove('not-valid');
    cardNumber.classList.add('is-valid');
    card.classList.add(name);      // добавляю новый класс с другим бэкграундом
    logoCard.src = logo;
  }
  const cardValue = e.target.value.trim();
  //  Если будет пустой ввод, то подставится значение 1
  // В таком случае если поле пустое, то будет показано как невалидное
  switch (getCreditCardNameByNumber(cardValue ? cardValue : '1')) {
    case 'Credit card is invalid!':
      cardNumber.classList.add('not-valid');
      cardNumber.classList.remove('is-valid');
      logoCard.src = '';
      break;
    case 'Visa':
      setValid('visa', Visa);
      break;
    case 'Mastercard':
      setValid('mastercard', MasterCard);
      break;
    case 'Maestro':
      setValid('maestro', Maestro);
      break;
    default:
      alert('Ваша карта не поддерживается');
      cardNumber.classList.add('is-valid');

  }

  checkValid();
});

Так же можно вынести ряд параметров в справочник

const cardsName = {
  Visa: {
    name: 'visa',
    logo: Visa
  },
  Mastercard: {
    name: 'mastercard',
    logo: Mastercard
  },
  Maestro: {
    name: 'maestro',
    logo: Maestro
  },
}

cardNumber.addEventListener('blur', (e) => {

  const cardValue = e.target.value.trim();
  // Эту подстановку можно заменить проверкой из первого примера
  const cardName = getCreditCardNameByNumber(cardValue ? cardValue : '1')
  switch (cardName) {
    case 'Credit card is invalid!':
      cardNumber.classList.add('not-valid');
      cardNumber.classList.remove('is-valid');
      logoCard.src = '';
      break;
    case 'Visa':
    case 'Mastercard':
    case 'Maestro':
      cardNumber.classList.remove('not-valid');
      cardNumber.classList.add('is-valid');
      card.classList.add(cardsName[cardName].name);
      logoCard.src = cardsName[cardName].logo;
      break;
    default:
      alert('Ваша карта не поддерживается');
      cardNumber.classList.add('is-valid');
  }

  checkValid();
});