Jquery - if input not empty, add class

Question

Heei. I have a question. I want to create if value of input is empty, the label remove class, else (if input has a value)

HTML

  <div class="input-field">
            <input type="email" id="username" name="email" required>
            <label for="username">Email Address</label>
        </div>
        <div class="input-field">
            <input type="password" id="password" name="password" required>
            <label for="password">Password</label>
        </div>

Jquery

$(document).ready(function(){
      if ($(".input-field:first-of-type input").val() == '') {
        $(".input-field:first-of-type label").removeClass("active");
      }
      else {
        $(".input-field:first-of-type label").addClass("active");
      }
});

CSS

label.active {
  color: red;
}

I hope, the label inside <div class="input-field"> first-of-type will be red when it has a class active. But it doesn't work. Any idea please?

My work : https://jsfiddle.net/f7nd0obb/8/

Hello there i just update your code on jsfiddle and now its working as per your requirement. hope it will help you — Suraj Menariya
– Suraj Menariya, Commented Apr 11, 2018 at 7:20

Sharad Kale · Accepted Answer · 2018-04-11 07:29:55Z

2

$('.input-field input').keyup(function(){
  
  if($(this).val()){
    $(this).parent().find('label').addClass("active");
  }else{
    $(this).parent().find('label').removeClass("active");
  }
});

label.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field">
  <input type="email" id="username" name="email" required>
  <label  for="username">Email Address</label>
</div>
<div class="input-field">
  <input type="password" id="password" name="password" required>
  <label for="password">Password</label>
</div>

answered Apr 11, 2018 at 7:29

Sharad Kale

9811 gold badge8 silver badges19 bronze badges

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

1 Comment

Bariq Dharmawan Over a year ago

Thank you, I appreciate your answer!

John Zenith · Accepted Answer · 2018-04-11 07:39:06Z

1

Try this:

$('.input-field input').on('keyup', function()
{
    var self = $( this ),
    label = self.siblings('label');

    if ( self.val() != '' ) {
        label.addClass('active');
    } else {
        label.removeClass('active');
    }
});

edited Apr 11, 2018 at 7:39

answered Apr 11, 2018 at 7:26

John Zenith

5025 silver badges11 bronze badges

9 Comments

fdomn-m Over a year ago

Might wanna check that logic... why check if it already has the active class?

John Zenith Over a year ago

Ohh! I think jQuery is already doing that out of the box by checking if a class exists before adding it, but if not, checking for the class is good because you don't want to have the 'active' class more than once on a single element.

fdomn-m Over a year ago

No, my point being that if you were to run your code, every time you clear the input it would toggle the active class. ie in some cases it would be active and some cases it wouldn't. You'll also see that "active" means "has a value" (ie is active) so the test would be self.val()!=''. If you change it to that then active would toggle every time you pressed a key as the check if it's already there is with the check to see if it should be there.

John Zenith Over a year ago

Yes, you are right. I grasp what you pointed out. I looked at your code and saw the condition you used, so I have updated the code

Bariq Dharmawan Over a year ago

Woow, I love it @JohnZenith . It simple for me. Thank your, really thank you for your answer! :)

|

Zenoo · Accepted Answer · 2018-04-11 07:17:51Z

1

You simply need to put your condition in a change event handler :

$('#username').on('change',function(){
  if($(this).val() == ''){
    $(this).next().removeClass("active");
  }else{
    $(this).next().addClass("active");
  }
});

label.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field">
  <input type="email" id="username" name="email" required>
  <label for="username">Email Address</label>
</div>
<div class="input-field">
  <input type="password" id="password" name="password" required>
  <label for="password">Password</label>
</div>

answered Apr 11, 2018 at 7:17

Zenoo

12.9k4 gold badges48 silver badges71 bronze badges

Comments

fdomn-m · Accepted Answer · 2018-04-11 07:19:29Z

1

Your code only runs when once - on doc ready.

As neither of your inputs have a value at that time, it removes .active from both. If you give one your inputs a value at the start, it runs fine:

Updated fiddle: https://jsfiddle.net/f7nd0obb/10/

It's possible you meant to make this check after the user has had a chance to input some values, so use input to update as the user changes the values, eg:

function updateActive() {
  if ($(".input-field:first-of-type input").val() == '') {
    $(".input-field:first-of-type label").removeClass("active");
  } else {
    $(".input-field:first-of-type label").addClass("active");
  }
}

$(".input-field>input").on("input", updateActive);

// Also on startup
updateActive();

label.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field">
  <input type="email" id="username" name="email" required>
  <label for="username">Email Address</label>
</div>
<div class="input-field">
  <input type="password" id="password" name="password" required>
  <label for="password">Password</label>
</div>

answered Apr 11, 2018 at 7:19

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

1 Comment

Bariq Dharmawan Over a year ago

Love it, surely. I appreciate your answer!

Collectives™ on Stack Overflow

Jquery - if input not empty, add class

4 Answers 4

1 Comment

9 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related