0
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.
0
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.
0
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>
Whoa, thanks a bro !!!
If the answer was useful it will be accepted to close it on the site.
Ahh went over, I’m new here...
how do I make it already validating as the user type? Why it only valid qnd click out...
Just change it Blur for keyup.
Thanks bro ! Saved !
Browser other questions tagged javascript jquery
You are not signed in. Login or sign up in order to post.
Shows when you enter the email, or when you do Submit? If it is only a feedback for usability sake vc can alert the user using only CSS techniques
– hugocsl