How do I validate e-mail and if the e-mail is valid, an "ok" icon appears on the e-mail side, otherwise an "x" icon will appear if it is not typed, it does not nothing (hide and show) to hide the icons.
Email validation using hide and show
0
asked by anonymous 24.05.2018 / 21:01
1 answer
0
I've done 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><labelfor="email">Email:</label>
<input type="email" id="email"> <i class="fas fa-check"></i> <i class="fas fa-times"></i>
24.05.2018 / 23:14