html Comprobacióndeemail format field con efecto tiemblor

Posted 2021-05-11

HTML:

<tr>
	<td>Email</td>		
	<td><u><input id="nuevo_email" value="{{ $cliente->email }}"/></u></td>	
	<td><i id="check" class="fa fa-check" style="color: green; display: none"></i></td>			
</tr>
<tr><td id="email_mensaje" style="color: red; display: none"><small>El email no es válido</small></td></tr>

JS:
<script type="text/javascript">

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);
    
}
    
$('#nuevo_email').focusout(function(){
	if (!validateEmail($('#nuevo_email').val())){
		$('#email_mensaje').show();
		$('#nuevo_email').css('border-color', 'red');
		$('#nuevo_email').addClass('tiembla');
		$('#check').hide();
	}
	else {
		$('#email_mensaje').hide();
		$('#nuevo_email').removeClass('tiembla');		
		$('#nuevo_email').css('border-color', '');		
		$('#check').show();	
	}
});

</script>

CSS:

.tiembla {
	-webkit-animation: tiembla 0.1s 2;
}

@-webkit-keyframes tiembla{
	0%  { -webkit-transform:rotateZ(-5deg); }
	50% { -webkit-transform:rotateZ( 0deg) scale(.8); }
	100%{ -webkit-transform:rotateZ( 5deg); }
}