CODEWITHSUNDEEP
jquery
Bariq Dharmawan
Bariq Dharmawan

Reputation: 820

Jquery - if input not empty, add class

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/

Upvotes: 0

Views: 5889

Answers (4)

John Zenith
John Zenith

Reputation: 502

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

Upvotes: 1

Sharad Kale
Sharad Kale

Reputation: 971

$('.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>

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

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>

Upvotes: 1

Zenoo
Zenoo

Reputation: 12880

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>

Upvotes: 1

Related Questions