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

Question

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!

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

Answer 1

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> 

Answer 2

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>