How can I remove a class if the class has a value? [duplicate]
How can I remove a class if the class has a value? [duplicate]
This question already has an answer here:
I want to check if a class has a value. If the class has a value the text color "red" should be removed. At the moment it just works when i click into the input field. I've tried different on.(events) but I couldn't find the right one....
!Important! I do not want to check if someone made a input, just if the class has a value!
$('.form-control-login').on('click', function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});
.is-empty {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
<label class="control-label">Your Email</label>
<input class="form-control-login" value="test" name="login" autocomplete="username">
</div>
Thanks for your help!
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Yes you are right! If <input class="form-control-login" value="" name="login" autocomplete="username"> the Value is empty i want to add a class. (I meant the value in the input class (so value="test")
– Gamernamer
Jul 1 at 0:16
Have you tried the
input event type?– Jonathan Lonowski
Jul 1 at 0:17
input
keyup will do it for you, as @lone Wolf already answer.
– P. Waksman
Jul 1 at 0:20
Already read it... Yes these options will work If i make a input. But that was not that what I wanted.. :/ I want that jqery "checks" If <input> has a value predefined so if <input class="form-control-login" value="test" name="login" autocomplete="username"> It should remove the red color. And if the <input> class has no value <input class="form-control-login" value=""> it should stay red. (When the page loaded). (At the moment it just checks it if i click into the field. But it should check it on loading the element)
– Gamernamer
Jul 1 at 0:24
1 Answer
1
I'm guessing what you're trying to do is, update the css class as the user types in, for this, you'll need to handle keyup event to update the css class like below, try it
$('input.form-control-login').keyup(function() {
console.log("changed " + this.value);
$(this).parent().toggleClass('is-empty', this.value.trim().length === 0);
});
Working demo
Why keyup event and not change event ?
Because change event will be fired only on blur, and you want to highlight the label in red as soon as the user makes the input empty,
I would do it with === instead of ==, but it will work on both.
– P. Waksman
Jul 1 at 0:20
updated answer.
– Lone Wolf
Jul 1 at 0:22
Thanks for your answer! But is it possible to check if the <input class="form-control-login" value="test"> has a predefined input (test). So if it has a predefined value it should toggle the class. And if not it should not toggle the class?
– Gamernamer
Jul 1 at 0:31
In that case, I'd recommend that you use placeholder attribute instead. i.e <input class="form-control-login" placeholder="test or whatever here" value="test" name="login" autocomplete="username">
– Lone Wolf
Jul 1 at 0:32
That doesn't work for me too... I will show you the "real" problem.. Take a look at my fiddle: jsfiddle.net/Gamernamer/onmb34vy/4 The problem is if it has a value predefined (the mail) and the placeholder each of them are on the same size. Only if i click on the textfield the email text gets smaller. That is the is-empty class. But i want that if it has a predefined value the email field is automatically small. (At the moment you have to click one time until it realises it)
– Gamernamer
Jul 1 at 0:47
What do you mean with "The class has value", the css class? The css class is just a pre formatted style, are you saying the value of the Input field? If I got it, you wanna have a class applied at your input if the input is empty. is it?
– P. Waksman
Jul 1 at 0:09