Comprobación de email format field con efecto tiemblor
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); }
}