E-mail validation using Id and show

Asked

Viewed 53 times

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.

  • 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

1 answer

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.

  • 1

    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 !

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.