title: Insert fa fa icon inside input box when no text is present
body: <p><a href="https://i.stack.imgur.com/d0vYI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d0vYI.png" alt="Input fa fa icons"></a></p>
  
  <p>Currently, when the user is typing into the 'first name', 'last name', etc input boxes only a green fa fa icon appears if text is present.  When there is no text present in the input boxes, nothing appears.  I would like to add a red x circle fa fa icon to those input boxes when no text is present.  This functionality is similar to the 'email' and 'phone' inputs.  If anyone know how I should go about doing this your help would be greatly appreciated!</p>
  
  <p><a href="http://jsfiddle.net/vvffpjxb/10/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"&gt;
                &lt;label&gt;First Name
                  &lt;input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label&gt;Last Name
                  &lt;input id="last_name" maxlength="80" name="last_name" size="20" type="text" onkeyup="test()"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label&gt;Email
                  &lt;span class="error"&gt;Please enter a valid email address&lt;/span&gt;
                  &lt;input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"&gt;&lt;i class="fa fa-times-circle-o" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label&gt;Phone
                  &lt;span class="error"&gt;Please enter a valid phone number&lt;/span&gt;              
                  &lt;input id="phone" maxlength="80" name="phone" size="20"    type="tel" onkeyup="test()"&gt;&lt;i class="fa fa-times-circle-o" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label&gt;City
                  &lt;input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label&gt;State/Province
                  &lt;input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label id="co"&gt;Company
                  &lt;input id="company" name="company" type="text" onkeyup="test()"&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/label&gt;
                &lt;label&gt;Comments
                  &lt;textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"&gt;&lt;/textarea&gt;
                  &lt;input id="sub" type="submit" disabled="disabled" /&gt;
                &lt;/label&gt;
  
                  &lt;div&gt;                
                      &lt;select  hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest"&gt;
                      &lt;option value=""&gt;--None--&lt;/option&gt;
                      &lt;option selected="selected" value="Visiant"&gt;Visiant&lt;/option&gt;
                      &lt;option  value="Tessellate"&gt;Tessellate&lt;/option&gt;
                  &lt;/select&gt;&lt;br&gt;
  
                  &lt;select  hidden="true" id="lead_source" name="lead_source"&gt;
                      &lt;option value=""&gt;--None--&lt;/option&gt;
                      &lt;option value="Internal"&gt;Internal&lt;/option&gt;
                  &lt;option value="Trade Show"&gt;Trade Show&lt;/option&gt;
                  &lt;option selected="selected" value="Website"&gt;Website&lt;/option&gt;
                  &lt;option value="Direct Marketing"&gt;Direct Marketing&lt;/option&gt;
                  &lt;option value="Social Media"&gt;Social Media&lt;/option&gt;
                  &lt;option value="Other"&gt;Other&lt;/option&gt;
                  &lt;/select&gt;&lt;br&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    color: #fff;
    background-color: #f78e2a;
    text-align: center;
  }
  
  form {
    color: #fff;
    background-color: #f78e2a;
    text-align: center;
    font-family: Lato;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .form-title {
    font-size: 38px;
    color: #fff;
    font-family: "Lato";
    letter-spacing: 70px;
  }
  
  input[type="tel"] {
    width: 100%;
    height: 85%;
    padding: 10px;
    background-color: #f9a558;
    border: 1px solid #fff;
  }
  input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #f9a558;
    border: 1px solid #fff;
  }
  
  
  input[type="text"]:focus {
    background-color: #fff;
  }
  
  input[type="text"]:visited {
    background-color: #fff;
  }
  
  input[type="tel"]:focus {
    background-color: #fff;
  }
  
  input[type="tel"]:visited {
    background-color: #fff;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  textarea {
    width: 100%;
    background-color: #f9a558;
    border: 1px solid #fff;
  }
  
  textarea:focus {
    background-color: #fff;
  }
  
  #co {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  label:nth-last-child(-n+2) {
    flex-basis: 100%;
    max-width: 100%;
  }
  
  select,
  label {
    height: 50px;
    width: 48%;
    margin: 2% 1%;
    text-align: left;
    font-family: "Lato";
  }
  
  #sub {
    border-radius: 6px;
    width: 120px;
    height: 35px;
    text-transform: uppercase;
    display: block;
    margin-top: 10px;
  }
  
  button {
    margin-top: 10px;
    background-color: #B9B9B9;
    color: #959595;
    border-radius: 6px;
    width: 120px;
    height: 35px;
    margin-left: 1%;
    display: block;
  }
  
  button:focus {
    background-color: #fff;
    color: #f78e2a;
  }
  
  @media (max-width: 426px) {
    label {
      width: 98%;
    }
  }
  
  @media (min-width: 426px) {
    .container {
      flex-direction: row;
      flex-wrap: wrap;
      align-self: flex-start;
    }
  }
  
  label {
    position: relative;
  }
  
  .fa {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-50%, -5%);
    opacity: 0;
    transition: opacity .5s, color .5s;
  }
  
  [data-valid] .fa {
    opacity: 1;
    color: green;
  }
  
  [data-valid="valid"] .fa {
    color: green;
  }
  
  [data-valid="error"] .fa {
    color: red;
  }
  
  .error {
    display: none;
    color: red;
    font-size: .7em;
    position: absolute;
    left: 10px;
    top: 0;
    transform: translateY(150%);
  }
  
  [data-valid="error"] .error {
    display: block;
  }
  
  input#sub:not([disabled]){
      background-color: #fff;
      color: #F68D2E;;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function phoneNumber(phone)  {
    var phoneno = /^\d{9,11}$/;
  
    console.log("PHONE: "+phoneno.test(phone));
    return phoneno.test(phone);
  }
  
  $('input[type="tel"]').on('keyup', function() {
    var $label = $(this).closest('label');
    if ($(this).val().trim() != '') {
      if ($(this).is('#phone')) {
        if (phoneNumber($(this).val())) {
          $label.attr('data-valid', 'valid');
           $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
        } else {
          $label.attr('data-valid', 'error');
          console.log("this works");
           $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
        }
      } else {
        $label.attr('data-valid', 'valid');
        console.log("this works")
      }
    } else {
      $label.removeAttr('data-valid');
      console.log("this works")
  
    }
  });
  
  
  function validateEmail(email) {
    var re = /^(([^&lt;&gt;()[\]\\.,;:\s@\"]+(\.[^&lt;&gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  
    console.log("email: "+re.test(email));
    return re.test(email);
  }
  
  $('input[type="text"]').on('keyup', function() {
    var $label = $(this).closest('label');
    if ($(this).val().trim() != '') {
      if ($(this).is('#email')) {
        if (validateEmail($(this).val())) {
          $label.attr('data-valid', 'valid');
          $(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
  
        } else {
          $label.attr('data-valid', 'error');
          console.log("this works 1")
           $(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
        }
      } else {
        $label.attr('data-valid', 'valid');
        console.log("this works 2");
      }
    } else {
      $label.removeAttr('data-valid');
      console.log("this works 3");
    }
  });
  
  
  test = function() {
    if ($("#first_name").val()
        &amp;&amp; $("#last_name").val()
        &amp;&amp; $("#email").val()
        &amp;&amp; $("#phone").val()
        &amp;&amp; $("#city").val()
        &amp;&amp; $("#state").val()
        &amp;&amp; $("#company").val()
        &amp;&amp; $("#comments").val()) {
  
      $("#sub").removeAttr("disabled");
    }
  }
  
   // $('#sub').click(function(){
   //     $('.form-hide').hide();
   //   });
  </code></pre>