jQuery float labels

floating labels with label above input

by Amy Ruddy

HTML

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <title>Show Hide Password with floating labels</title>
  </head>

  <body>
    <div class="my-5 border shadow" id="main">
      <div class="bg-white rounded">
        <div class="text-center py-2 rounded-top" id="form_header">
          <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="pointer"><path d="M18.536 7.555c-1.188-.252-4.606-.904-5.536-1.088v-3.512c0-1.629-1.346-2.955-3-2.955s-3 1.326-3 2.955v7.457c-.554-.336-1.188-.621-1.838-.715-1.822-.262-3.162.94-3.162 2.498 0 .805.363 1.613 1.022 2.271 3.972 3.972 5.688 5.125 6.059 9.534h9.919v-1.748c0-5.154 3-6.031 3-10.029 0-2.448-1.061-4.157-3.464-4.668zm.357 8.022c-.821 1.483-1.838 3.319-1.891 6.423h-6.13c-.726-3.82-3.81-6.318-6.436-8.949-.688-.686-.393-1.37.442-1.373 1.263-.006 3.06 1.884 4.122 3.205v-11.928c0-.517.458-.955 1-.955s1 .438 1 .955v6.948c0 .315.256.571.572.571.314 0 .57-.256.57-.571v-.575c0-.534.49-.938 1.014-.833.398.079.686.428.686.833v1.273c0 .315.256.571.571.571s.571-.256.571-.571v-.83c0-.531.487-.932 1.008-.828.396.078.682.424.682.828v1.533c0 .315.256.571.571.571s.571-.256.571-.571v-.912c0-.523.545-.867 1.018-.646.645.305...

CSS

#main {
  max-width: 400px;
  margin: 0 auto;
}

#form_header,
.btn-primary {
  background-color: #0491BF !important;
  color: #ffffff;
}

.btn-primary {
  border-color: #0491BF !important;
}

#form_header p {
  font-size: 1.8rem;
  margin: 0;
}

#pointer {
  fill: #fff;
}

label {
  font-size: 12.5px;
  color: #464646;
  font-weight: bold;
}

/* Add red asterisk to required labels, required class is added by jQuery */

label.required::after {
  content: " *";
  color: #E52759;
}

input {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #bbb !important;
  transition: all 0.3s linear;
  display: inline !important; 
}

input:focus {
  box-shadow: none !important;
  border-bottom: 2px solid #0491BF !important;
}

.floating-label {
  position: relative;
  margin-bottom: 10px;
}

.floating-label label {
  position: absolute;
  top: calc(50%);
  transition: all 0.5s ease;
  opacity: 0;
}

.animate_label {
  transition: all 0.5s ease;
  opacity: 1 !important;
  transform: translateY(-20px);
}

.hide_show_password {
  cursor: pointer;
  float: right;
  transform: translateY(30px);
}

JavaScript

// Find inputs that are required and add an asterik to the placeholder. 
// Add required class to the inputs label for css
$('input').each(function() {
  if ($(this).prop('required')) {
    var placeholder_value = $(this).attr('placeholder') + ' *';
    console.log(placeholder_value);
    $(this).attr("placeholder", placeholder_value);
    $(this).parent().find('label').addClass('required');
  }
});

  var formFields = $('.form-group');
  
  formFields.each(function() {
    var field = $(this);
    var input = field.find('input');
    var label = field.find('label');
    
    function checkInput() {
      var valueLength = input.val().length;
      
      if (valueLength > 0 ) {
        label.addClass('animate_label')
      } else {
        label.removeClass('animate_label')
      }
    }
    
    input.keyup(function() {
      checkInput()
    })
  });

//Hide or show the password
$('.hide_show_password').click(function() {
  var x = $(this).parent().find('input');
  if (x.attr('type') === 'password') {
    // change the input type
    x.attr('type', 'text');
    // change the eye icon
    $(this).toggleClass('fas fa-eye-slash far, far fa-eye');
  } else {
    // change the input type
    x.attr('type', 'password');
    // change the eye icon
    $(this).toggleClass('fas fa-eye-slash far, far fa-eye');
  }
});

// Disable form submission 
$('form').submit(false);