How to check if a class has a value and toggle a class after that


How to check if a class has a value and toggle a class after that



I want to check if a class has a value. Is there a option to "check" immediately if there is a value in the <input> ? (Without any click or something). (So that the email placeholder is immediately small if there is a value predefined) I've also made a small gif to show my problem: i.imgur.com/WQq53Ky.mp4. 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 if you load the page!


<input>




$('.form-control-login').focus(function() {
$(this).parent().addClass('in-focus');
});

$('.form-control-login').blur(function() {
$(this).parent().removeClass('in-focus');
});

$('.form-control-login').on('input', function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

$('.form-control-login').blur( function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});


.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label, .form-group.label-static label.control-label {
position: absolute;
pointer-events: none;
transition: .3s ease all;
}
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
font-size: 44px;
line-height: 1.4;
font-weight: 400;
padding: 20px;
}
.form-group.label-static label.control-label,
.form-group.label-floating.in-focus label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.has-bootstrap-select label.control-label {
margin-top: -10px;
font-size: 11px;
line-height: 1.07143; }

.form-group.login-error::after {
content: 'f00d';
position: absolute;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 100%;
background-color: #f92552;
color: #fff;
font-size: 9px;
right: 35px;
top: 30px;
margin-top: -10px;
font-family: FontAwesome;
}
.form-group.reg-error::after {
top: 210px;
}
.form-group.label-floating.reg-bday.is-empty {
display: table-cell;
padding-right: 10px;
padding-bottom: 10px;
}
.form-group.label-floating.reg-bday {
display: table-cell;
padding-right: 10px;
padding-bottom: 10px;
}
.form-control-login {
height: 60px;
display: block;
width: 100%;
padding: 1.1rem;
font-size: 14px;
line-height: 1.5;
padding: 1.5rem 1.1rem .5rem;
line-height: 1.75;
color: #495057;
background-color: #fff;
border: 1px solid #e6ecf5;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-login:focus {
border: 1px solid rgba(255, 93, 56, 0.43);
}


<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">EMAIL</label>
<input class="form-control-login" name="login" value="James@testmail.de" autocomplete=off type="email" login-error>
</div>



Thanks for your help!




2 Answers
2



Simply run this statement on page load


$('.form-control-login').parent().toggleClass('is-empty', $('.form-control-login').val().trim().length == 0);



Stack snipppet




$('.form-control-login').parent().toggleClass('is-empty', $('.form-control-login').val().trim().length == 0);

$('.form-control-login').focus(function() {
$(this).parent().addClass('in-focus');
});

$('.form-control-login').blur(function() {
$(this).parent().removeClass('in-focus');
});

$('.form-control-login').on('input', function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

$('.form-control-login').blur(function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});


.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label,
.form-group.label-static label.control-label {
position: absolute;
pointer-events: none;
transition: .3s ease all;
}

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label {
font-size: 44px;
line-height: 1.4;
font-weight: 400;
padding: 20px;
}

.form-group.label-static label.control-label,
.form-group.label-floating.in-focus label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.has-bootstrap-select label.control-label {
margin-top: -10px;
font-size: 11px;
line-height: 1.07143;
}

.form-group.login-error::after {
content: 'f00d';
position: absolute;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 100%;
background-color: #f92552;
color: #fff;
font-size: 9px;
right: 35px;
top: 30px;
margin-top: -10px;
font-family: FontAwesome;
}

.form-group.reg-error::after {
top: 210px;
}

.form-group.label-floating.reg-bday.is-empty {
display: table-cell;
padding-right: 10px;
padding-bottom: 10px;
}

.form-group.label-floating.reg-bday {
display: table-cell;
padding-right: 10px;
padding-bottom: 10px;
}

.form-control-login {
height: 60px;
display: block;
width: 100%;
padding: 1.1rem;
font-size: 14px;
line-height: 1.5;
padding: 1.5rem 1.1rem .5rem;
line-height: 1.75;
color: #495057;
background-color: #fff;
border: 1px solid #e6ecf5;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control-login:focus {
border: 1px solid rgba(255, 93, 56, 0.43);
}


<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">EMAIL</label>
<input class="form-control-login" name="login" value="James@testmail.de" autocomplete=off type="email" login-error>
</div>



You must check for the value immediately on page load. Then apply focus on the element based on the input value, thus achieving the effect.




$('.form-control-login').focus(function() {
$(this).parent().addClass('in-focus');
});

$('.form-control-login').blur(function() {
$(this).parent().removeClass('in-focus');
});

$('.form-control-login').on('input', function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

$('.form-control-login').blur( function() {
$(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

(function(){
var inp = document.querySelector('.form-control-login');
if(inp.value) inp.focus();
})();


.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label, .form-group.label-static label.control-label {
position: absolute;
pointer-events: none;
transition: .3s ease all;
}
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
font-size: 44px;
line-height: 1.4;
font-weight: 400;
padding: 20px;
}
.form-group.label-static label.control-label,
.form-group.label-floating.in-focus label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.has-bootstrap-select label.control-label {
margin-top: -10px;
font-size: 11px;
line-height: 1.07143; }

.form-group.login-error::after {
content: 'f00d';
position: absolute;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 100%;
background-color: #f92552;
color: #fff;
font-size: 9px;
right: 35px;
top: 30px;
margin-top: -10px;
font-family: FontAwesome;
}
.form-group.reg-error::after {
top: 210px;
}
.form-group.label-floating.reg-bday.is-empty {
display: table-cell;
padding-right: 10px;
padding-bottom: 10px;
}
.form-group.label-floating.reg-bday {
display: table-cell;
padding-right: 10px;
padding-bottom: 10px;
}
.form-control-login {
height: 60px;
display: block;
width: 100%;
padding: 1.1rem;
font-size: 14px;
line-height: 1.5;
padding: 1.5rem 1.1rem .5rem;
line-height: 1.75;
color: #495057;
background-color: #fff;
border: 1px solid #e6ecf5;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control-login:focus {
border: 1px solid rgba(255, 93, 56, 0.43);
}


<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">EMAIL</label>
<input class="form-control-login" name="login" value="James@testmail.de" autocomplete=off type="email" login-error>
</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Rothschild family

Image
"House of Rothschild" redirects here. For the film, see The House of Rothschild. For other uses, see Rothschild (disambiguation). Rothschild Jewish noble banking family Coat of arms granted to the Barons Rothschild in 1822 by Emperor Francis I of Austria Ethnicity Jewish Current region Western Europe (mainly United Kingdom, France, and Germany) [1] Etymology Rothschild (German): "red shield" Place of origin Frankfurter Judengasse, Frankfurt, Holy Roman Empire Founded 1760s (1577  ( 1577 ) ) Founder Mayer Amschel Rothschild (1744–1812) (Elchanan Rothschild, b. 1577) Titles List Freiherr von Rothschild (1822) Baronet, of Tring Park (1847) Baron Rothschild (1885) Traditions Judaism, Goût Rothschild Motto Concordia, Integritas, Industria (English: Harmony, Integrity, Industry ) Estate(s) List British properties Château de Ferrières Palais Rothschild Cadet branches List Austrian branch English branch French branch Neapolitan branch A Rothschild house,...
Read more

Cinema of Italy

Image
Cinema of Italy Some of the notable actors and filmmakers [a] No. of screens 3,217 (2011) [1]  • Per capita 5.9 per 100,000 (2011) [1] Main distributors Medusa Film (16.7%) Warner Bros. (13.8%) 20th Century Fox (13.7%) [2] Produced feature films (2013) [3] Total 167 Number of admissions (2013) [3] Total 97,380,572  • Per capita 1.50 (2012) [4] National films 30,208,422 (31.0%) Gross box office (2013) [3] Total €618 million National films €188 million (30.5%) The Cinema of Italy comprises the films made within Italy or by Italian directors. Since the development of the Italian film industry in the early 1900s, Italian filmmakers and performers have, at times, experienced both domestic and international success, and have influenced film movements throughout the world. As of 2014, Italian films have won 14 Academy Awards for Best Foreign Language Film, the most of any country, as well as 12 Palmes d'Or, the second-most ...
Read more