I am trying to change the color of the related icon for inputs when they are focused on or not empty, but my code doesn't seem to be working correctly for non-empty inputs.
<div class="form-group">
<label class="label-login" for="emailInput">Email</label>
<input type="email" class="form-control" autocomplete="off" id="emailInput" />
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label class="label-login" for="passInput">Password</label>
<input type="password" class="form-control" autocomplete="off" id="passInput" />
<i class="fa fa-lock"></i>
</div>
$(document).ready(function () {
$(".myPanel .form-control").each(function () {
var valueInput = $(this);
valueInput.focus(function () {
valueInput.next().addClass("colorOrange");
});
valueInput.blur(function () {
valueInput.next().removeClass("colorOrange");
});
valueInput.on('input', function () {
if (valueInput.val().length > 0) {
valueInput.prev().addClass("lableFocus");
valueInput.next().addClass("colorOrange");
} else {
valueInput.prev().removeClass("lableFocus");
valueInput.next().removeClass("colorOrange");
}
});
});
});
.colorOrange{
color:#FFAE00;
}