Insert check icon inside input box when text is present - html

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

Answer 1

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>

Answer 2

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