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-outertextarea {
  resize: none;
  display: inline-block;
  vertical-align: middle;
  margin-top: 16px;
  min-height: 0;
}

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

.mat-input-outerinput,
.mat-input-outertextarea {
  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-outerlabel {
  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-outerinput:focus~.border,
.mat-input-outertextarea:focus~.border {
  background: transparent;
}

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

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

.mat-input-outerinput:focus+label,
.mat-input-outertextarea: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);
} 

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