E-mail validation using Id and show

Question

How do I validate email and if the email is valid, an "ok" icon appears on the email side, if it is not shown an "x" icon, if it is not typed, it does nothing.(using Hide and show) to hide the icons.

Answer 1

I made an example for you to test:

$(document).ready(function() {			
	var valida = "[email protected]"; // texto só para validar a condição
	$(".fa-check").hide(); 
	$(".fa-times").hide();

	$("#email").on("blur", function() { 
	     var input = $("#email").val();

	     if(input == valida) {
                  $(".fa-check").show();
	          $(".fa-times").hide();
		  $(this).addClass("bordaVerde");
		  $(this).removeClass("bordaVermelha");
	     } 
	     else if(input != valida) {
	          $(".fa-times").show();
		  $(".fa-check").hide();
		  $(this).addClass("bordaVermelha");
		  $(this).removeClass("bordaVerde");
	     }				 
	})
})	

.fa-check {
   color: green;
}
.fa-times {
   color: red;
}
.bordaVerde {
   border: solid 2px green;
}
.bordaVermelha {
   border: solid 2px red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="email">Email:</label>
<input type="email" id="email"> <i class="fas fa-check"></i> <i class="fas fa-times"></i>