Jquery Floating Label Email

Good day, I'm working on a form with floating labels. The labels float fine, except for the input field with type=email. The user enters text into the field and if it is invalid, w

Solution 1:

Change the CSS, below you've got a working example
For future! - css in most cases will destroy your jquery script :/
Just try to use jquery for everything if you are doing interactive forms! :)

Replace section with :valid to this

.mat-input-outer .active {
  top: -15px;
  color: #757575;
  opacity: 1;
  filter: alpha(opacity=100);
} 

// Activate Floating Label - Input
$(function() {
  $('.mat-input-outer label').click(function() {
    $(this).prev('input').focus();
  });
  $('.mat-input-outer input').focusin(function() {
    $(this).next('label').addClass('active');
  });
  $('.mat-input-outer input').focusout(function() {
    if ($(this).val().length <= 0) {
      $(this).next('label').removeClass('active');
    } else {
      $(this).next('label').addClass('active');
    }
  });
});

.mat-input {
  margin: 2% auto;
  margin-bottom: 30px;
}

.mat-input-outer {
  display: table;
  width: 100%;
  position: relative;
	font-family: arial;
}

.mat-input-outer textarea {
  resize: none;
  display: inline-block;
  vertical-align: middle;
  margin-top: 16px;
  min-height: 0;
}

.mat-input-outer input {
  height: 50px;
}

.mat-input-outer input,
.mat-input-outer textarea {
  border-radius: 0;
  border: none;
  width: 100%;
  padding: 6px;
  color: #757575;
  font-family: "museo-sans", sans-serif;
  font-size: 16px;
  background: transparent;
	outline: none;
}

.mat-input-outer label {
  position: absolute;
  top: 12px;
  transition: .2s;
  color: #757575;
  cursor: text;
  margin-left: 6px;
}

.mat-input-outer .border {
  height: 1px;
  background: #757575;
  transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
}

.mat-input-outer .border::before {
  content: " ";
  display: table;
  height: 2px;
  width: 0%;
  background: transparent;
  transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  margin: 0 auto;
}

.mat-input-outer input:focus~.border,
.mat-input-outer textarea:focus~.border {
  background: transparent;
}

.mat-input-outer input:focus~.border::before,
.mat-input-outer textarea:focus~.border::before {
  width: 100%;
  background: #2B6FD7;
}

.mat-input-outer input:not(:placeholder-shown)~.border::before,
.mat-input-outer textarea:not(:placeholder-shown)~.border::before {
  width: 100%;
  background: #757575;
}

.mat-input-outer input:focus+label,
.mat-input-outer textarea:focus+label {
  top: -15px;
  color: #2B6FD7;
  opacity: 1;
  filter: alpha(opacity=100);
}

.mat-input-outer .active {
  top: -15px;
  color: #757575;
  opacity: 1;
  filter: alpha(opacity=100);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mat-input">
  <div class="mat-input-outer">
    <input type="text" placeholder=" " id="name" name="name" required>
    <label for="Name" class="">Name</label>
    <div class="border"></div>
  </div>
</div>
<div class="mat-input">
  <div class="mat-input-outer">
    <input type="email" placeholder=" " id="email" name="email" required>
    <label for="email" class="">Email Address</label>
    <div class="border"></div>
  </div>
</div>