Afficher les icônes fa fa dans les boîtes de saisie du téléphone et du courrier électronique

Question

A l'intérieur de mon formulaire, la zone de saisie email affiche un cercle vert x lorsque l'adresse électronique est correcte.

Je voudrais qu'il affiche un cercle vert comme les cases de saisie ci-dessus (prénom & nom de famille).
En outre, la zone de saisie phone affiche une icône en forme de coche en forme de cercle rouge lorsque le numéro est invalide et je souhaite afficher un cercle rouge x à la place.

Si quelqu'un sait comment y parvenir, votre aide est appréciée!

icône incorrect fa fa affichage sur e-mail et numéro de téléphone:

JSFiddle

HTML:

<form class="container" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST"> 
    <label>First Name 
    <input id="first_name" maxlength="40" name="first_name" size="20" type="text" onkeyup="test()" required><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" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i> 
    </label> 
    <label>Email 
    <span class="error">Please enter a valid email address</span> 
    <input id="email" maxlength="80" name="email" size="20" type="text" onkeyup="test()"><i class="fa fa-times-circle-o" aria-hidden="true"></i> 
    </label> 
    <label>Phone 
    <span class="error">Please enter a valid phone number</span>    
    <input id="phone" maxlength="80" name="phone" size="20" type="tel" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i> 
    </label> 
    <label>City 
    <input id="city" name="city" maxlength="40" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i> 
    </label> 
    <label>State/Province 
    <input id="state" maxlength="20" name="state" size="20" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i> 
    </label> 
    <label id="co">Company 
    <input id="company" name="company" type="text" onkeyup="test()"><i class="fa fa-check-circle" aria-hidden="true"></i> 
    </label> 
    <label>Comments 
    <textarea id="comments" name="" id="" cols="30" rows="10" onkeyup="test()"></textarea> 
    <input id="sub" type="submit" disabled="disabled" /> 
    </label> 

    <div>     
     <select hidden="true" id="00N6A000008yXMN" name="00N6A000008yXMN" title="Product Interest"> 
     <option value="">--None--</option> 
     <option selected="selected" value="Visiant">Visiant</option> 
     <option value="Tessellate">Tessellate</option> 
    </select><br> 

    <select hidden="true" id="lead_source" name="lead_source"> 
     <option value="">--None--</option> 
     <option value="Internal">Internal</option> 
    <option value="Trade Show">Trade Show</option> 
    <option selected="selected" value="Website">Website</option> 
    <option value="Direct Marketing">Direct Marketing</option> 
    <option value="Social Media">Social Media</option> 
    <option value="Other">Other</option> 
    </select><br> 
    </div> 
</form> 

CSS:

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

jQuery:

function phoneNumber(phone) { 
    var phoneno = /^\d{9}|\d{10}|\d{11}$/; 
    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'); 
     } else { 
     $label.attr('data-valid', 'error'); 
     console.log("this works") 
     } 
    } else { 
     $label.attr('data-valid', 'valid'); 
     console.log("this works") 
    } 
    } else { 
    $label.removeAttr('data-valid'); 
    console.log("this works") 

    } 
}); 


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() { 
    var $label = $(this).closest('label'); 
    if ($(this).val().trim() != '') { 
    if ($(this).is('#email')) { 
     if (validateEmail($(this).val())) { 
     $label.attr('data-valid', 'valid'); 
     } else { 
     $label.attr('data-valid', 'error'); 
     console.log("this works") 
     } 
    } else { 
     $label.attr('data-valid', 'valid'); 
     console.log("this works") 
    } 
    } else { 
    $label.removeAttr('data-valid'); 
    console.log("this works") 

    } 
}); 


test = function() { 
    if ($("#first_name").val() && $("#last_name").val() && $("#email").val() && $("#phone").val() && $("#city").val() && $("#state").val() && $("#company").val()) { 
    $("#sub").removeAttr("disabled"); 
    } 
} 

Answer 1

Votre script fonctionne ...
Mais vous ne changez simplement l'icône FA en fonction du résultat de validation.

Si elle est valide, ajoutez:

$(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle"); 

Si erreur, ajoutez:

$(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o"); 

CodePen