JS - Добавить класс в форму, когда ввод имеет значение

Question

У меня есть форма с одним полем для ввода адреса электронной почты. Теперь я хочу добавить класс к <form>, когда ввод имеет значение, но я не могу понять, как это сделать.

Я использую этот код для добавления класса к метке, когда вход имеет значение, но я не могу заставить его работать также:

function checkForInputFooter(element) {
    
    const $label = $(element).siblings('.raven-field-label');
  
        if ($(element).val().length > 0) {
            $label.addClass('input-has-value');
        } else {
            $label.removeClass('input-has-value');
        }
    }
  
// The lines below are executed on page load
$('input.raven-field').each(function() {
    checkForInputFooter(this);
});

// The lines below (inside) are executed on change & keyup
$('input.raven-field').on('change keyup', function() {
    checkForInputFooter(this);  
});

Pen: https://codepen.io/mdia/pen/gOrOWMN

Answer 1

Вот он, используя javascript vanilla. Я выбрал тег формы объявления тега label и добавил / удалил класс в соответствии со значением элемента, но сначала вы должны добавить id = "myForm" в тег формы html. Удачи.

function checkForInputFooter(element) {
    // element is passed to the function ^
    let label = element.parentNode.querySelector('.raven-field-label');
    let myForm = document.getElementById("myform");
    let inputValue = element.value;
    if(inputValue != "" && inputValue != null){          
      label.classList.add('input-has-value');
      myForm.classList.add('input-has-value');
    }
    else{
      label.classList.remove('input-has-value');
      myForm.classList.remove('input-has-value');
    }
    }

Answer 2

Вы можете прослушать событие 'input' элемента input и использовать .closest(<selector>) для добавления или удаления класса

$('input').on('input', function () {
  if (!this.value) {
    $(this).closest('form').removeClass('has-value');
  } else {
    $(this).closest('form').addClass('has-value');
  }
})

Изменить: https://codepen.io/KlumperN/pen/xxVxdzy

Answer 3

Это решение с использованием jQuery:

function checkForInputFooter(element) {
    // element is passed to the function ^
        
    const $label = $(element).siblings('.raven-field-label');      
    var $element = $(element);
    if ($element.val().length > 0) {
        $label.addClass('input-has-value');
        $element.closest('form').addClass('input-has-value');
    } else {
        $label.removeClass('input-has-value');
        $element.closest('form').removeClass('input-has-value');
    }
}
      
// The lines below are executed on page load
$('input.raven-field').each(function() {
    checkForInputFooter(this);
});
    
// The lines below (inside) are executed on change & keyup
$('input.raven-field').on('change keyup', function() {
    checkForInputFooter(this);  
});

Я обновил ваше перо здесь .