JS - Add class to form when input has value

Question

I have a form with one input field for the emailaddress. Now I want to add a class to the <form> when the input has value, but I can't figure out how to do that.

I'm using this code to add a class to the label when the input has value, but I can't make it work for the also:

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

your code is working fine for the Label, did you mean you want to add the same class to the Form? — Hamza Dahmoun
– Hamza Dahmoun, Commented Aug 5, 2020 at 8:29
@HamzaDahmoun Yes, that's what I need, add the class also the the <form> element. — n00bly
– n00bly, Commented Aug 5, 2020 at 8:38

Philip Stratford · Accepted Answer · 2020-08-05 08:52:19Z

1

This is the solution using 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);  
});

I've updated your pen here.

answered Aug 5, 2020 at 8:52

Philip Stratford

4,8105 gold badges52 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

n00bly Over a year ago

That's awesome! Thanks!

Hamza Dahmoun · Accepted Answer · 2020-08-05 08:46:18Z

Here it is, using javascript vanilla. I selected the label tag ad form tag and added/removed the class accoring to the element value, but first you should add id="myForm" to your form html tag. Good luck.

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');
    }
    }

Niels Klumper · Accepted Answer · 2020-08-05 08:55:04Z

1

You can listen to the 'input' event of the input element and use .closest(<selector>) to add or remove the class

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

Edit: https://codepen.io/KlumperN/pen/xxVxdzy

edited Aug 5, 2020 at 8:55

answered Aug 5, 2020 at 8:25

Niels Klumper

112 bronze badges

Collectives™ on Stack Overflow

JS - Add class to form when input has value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related