Insert check icon inside input box when text is present

Question

I am attempting to insert a green check icon when text is inside an input box. I am trying to do this by adding in a fa-fa icon, but it does not seem to be working. In addition, I would like to place a red x icon inside the input box if the email is not valid. If someone has any insight how to do this your help would be greatly appreciated! Fiddle and image are attached.

Green Check and Rex x icons

JsFiddle

<form action="">
    <div class="container" id="container">
        <label>First Name
          <input id="first_name" maxlength="40" name="first_name" size="20" type="text"><i class="fa fa-check-circle" aria-hidden="true"></i>
        </label>
        <label>Last Name
          <input id="last_name" maxlength="80" name="last_name" size="20" type="text">
        </label>
        <label>Email
          <input id="email" maxlength="80" name="email" size="20" type="text"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
<!--            <span class="msg error">Wrong email!</span>
            <span class="msg success">Correct email!</span> -->
        </label>
        <label>Phone
          <input id="phone" maxlength="40" name="phone" size="20" type="text">
        </label>
        <label>City
          <input id="city" name="city" maxlength="40" size="20" type="text">
        </label>
        <label>State/Province 
            <input id="state" maxlength="20" name="state" size="20" type="text">
        </label>
        <label id="company">Company
          <input id="company" name="company" type="text">
        </label>
        <label>Comments 
          <textarea name="" id="" cols="30" rows="10"></textarea>
         <button type="submit" name="submit">SUBMIT</button>
        </label>
    </div>
</form>

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;
}

h1 {
  font-size: 20px;
  text-align: center;
}


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;
}
.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;
}

#company {
  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;
}


button {
  margin-top: 10px;
  background-color: #B9B9B9;;
  color: #959595;
  border-radius: 6px;
  width: 120px;
  height: 35px;
  margin-left: 1%;
  display: block;
}

.fa fa-check-circle {
  color: green;
}

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;
  }


}

font awesome isn't working in the fiddle – sn3ll Jul 11 '17 at 19:43 — sn3ll, Jul 11 '17 at 19:43

score 1 · Accepted Answer · answered Jul 11 '17 at 20:11

A way to do this using javascript is to check keyup on the inputs, and if there is a value, show the icon. I'm using jQuery below.

And for your email, you need to use some sort of validation pattern - if the email input has content, show a red icon by default, but if it matches the validation pattern, change the icon to green. I got the email validation regex from How to validate email address in JavaScript?

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\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,}))$/;
  return re.test(email);
}

$('input[type="text"]').on('keyup', function() {
  if ($(this).val().trim() != '') {
    if ($(this).is('#email')) {
     if (validateEmail($(this).val())) {
       $(this).attr('data-valid','valid');
      } else {
       $(this).attr('data-valid','error');
      }
    } else {
      $(this).attr('data-valid','valid');
    }
  } else {
    $(this).removeAttr('data-valid');
  }
});

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;
}

h1 {
  font-size: 20px;
  text-align: center;
}

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;
}

.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;
}

#company {
  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;
}

button {
  margin-top: 10px;
  background-color: #B9B9B9;
  ;
  color: #959595;
  border-radius: 6px;
  width: 120px;
  height: 35px;
  margin-left: 1%;
  display: block;
}

.fa fa-check-circle {
  color: green;
}

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%, -45%);
  opacity: 0;
  transition: opacity .5s, color .5s;
}

[data-valid] + .fa {
  opacity: 1;
}

[data-valid="valid"] + .fa {
  color: green;
}

[data-valid="error"] + .fa {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="container" id="container">
    <label>First Name
      <input id="first_name" maxlength="40" name="first_name" size="20" type="text"><i class="fa fa-check-circle" aria-hidden="true"></i>
    </label>
    <label>Last Name
      <input id="last_name" maxlength="80" name="last_name" size="20" type="text">
    </label>
    <label>Email
      <input id="email" maxlength="80" name="email" size="20" type="text"><i class="fa fa-times-circle-o" aria-hidden="true"></i>
      <!--    <span class="msg error">Wrong email!</span>
   <span class="msg success">Correct email!</span> -->
    </label>
    <label>Phone
      <input id="phone" maxlength="40" name="phone" size="20" type="text">
    </label>
    <label>City
      <input id="city" name="city" maxlength="40" size="20" type="text">
    </label>
    <label>State/Province
      <input id="state" maxlength="20" name="state" size="20" type="text">
    </label>
    <label id="company">Company
      <input id="company" name="company" type="text">
    </label>
    <label>Comments
      <textarea name="" id="" cols="30" rows="10"></textarea>
      <button type="submit" name="submit">SUBMIT</button>
    </label>
  </div>
</form>

This seems like a great solution. I am trying to work it out in a fiddle now, however I am not able to see the fa fa icons when I type. Am I doing something incorrectly? https://jsfiddle.net/507hrk8q/ — Missy Bur, Jul 12 '17 at 13:19
I got it working on this fiddle: http://jsfiddle.net/M6N24/519/ thanks so much for your help! — Missy Bur, Jul 12 '17 at 13:48
@MissyBur awesome you're welcome. Be sure to accept a solution once the problem is solved so this doesn't show up in the unanswered list of questions. Just check the little checkbox by the solution that best solved your problem. — Michael Coker, Jul 12 '17 at 14:10
OK no problem. Just clicked on it. Thank you again for your help! — Missy Bur, Jul 12 '17 at 17:57

score 0 · Answer 2 · answered Jul 11 '17 at 20:22

First, you have your input and i tags inside label. This needs to be fixed. After that's complete, you should create a parent div for each field. This will allow you to use position: absolute; for the icons.

Something like this:

HTML

<div class="field">
    <label>First Name</label>
    <input id="first_name" maxlength="40" name="first_name" size="20" type="text" />
    <i class="fa fa-check-circle" aria-hidden="true"></i>    
</div>

CSS

.field {
    position: relative;
    margin: 10px;
}

.field i.fa {
    position: absolute;
    top: 5px;
    right: 5px;
}

Insert check icon inside input box when text is present

2 Answers2