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

How to make file upload 'Required' in Contact Form 7?

How to make file upload 'Required' in Contact Form 7? I have a Contact Form 7 form on my Wordpress website and I have specified that the file upload is mandatory by putting a * , however the users are able to submit the form without file upload. * Relevant Contact Form 7 form is given below: <div class="filelink">[file* AddanImage filetypes:gif|png|jpg|jpeg]</div> How do I write the Contact Form 7 code or add a validation perhaps so that the users are not able to submit the form without uploading an image? Any hints/help/guidance is highly appreciated. Have you check doc - contactform7.com/file-uploading-and-attachment – Mukesh Panchal Jun 30 at 8:38 @MukeshPanchal I have and the code complies with the documentation – Hamza Ahmad Jul 1 at 10:44
Read more

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, Wadd
Read more

amazon EC2 - How to make wp-config.php to writable?

Image
amazon EC2 - How to make wp-config.php to writable? I'm using Amazon EC2 with Bitnami wordpress. I recently tried to use plugins, they install and activate well, but there are still errors. Those errors look like permission errors. Also, perhaps, how to make the whole wordpress directory writable? I'm only accessing through SSH. Some of the errors: "A definition of a siteurl or homeurl was detected in your wp-config.php, but the file is not writable. Set your wp-config.php to writable and reload this page." From W3 total Cache: Please add the error messages you get back. – Damien Feb 8 '17 at 12:42 one is: " A definition of a siteurl or homeurl was detected in your wp-config.php, but the file is not writable. Set your wp-config.php to writable and reload this page."
Read more