title: How to check if a class has a value and toggle a class after that
body: <p>I want to check if a class has a value. Is there a option to "check" immediately if there is a value in the <code>&lt;input&gt;</code> ? (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!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.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);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="form-group label-floating is-empty"&gt;
                                  &lt;label class="control-label"&gt;EMAIL&lt;/label&gt;
                                  &lt;input class="form-control-login" name="login" value="James@testmail.de" autocomplete=off type="email" login-error&gt;
                          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help!</p>