Animaciones a un input con JQuery.UI

Un pequeño ejemplo que nos permite agregarle una animación a un input cuando se ingresa un valor incorrecto.

Usamos 2 librerias de JQuery:

    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui-1.11.1.js"></script>

La función Javascript va a utilizar Ajax para ir al servidor para validar el valor:

<script>
function RecalculoAjax(val) {

if ($.isNumeric(val.value)) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/Validacion",
data: "{val: '" + val.value + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function (datos) {
var htmlString = datos.d;
if (datos.d != 'OK') {
$(val).effect("shake"); //hace vibrar el input
}

$('#lblresultado').text(htmlString);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert('Ha ocurrido un error interno: ' + err.Message);
}
});         // ajax
} //if
else { $('#lblresultado').text("Ingrese un número"); }

}
</script>

En ese mismo código se ve como utilizamos de manera muy sencilla la animación:

if (datos.d != 'OK') {
$(val).effect("shake"); //hace vibrar el input
}

Y le agregamos el evento al textbox:

<asp:TextBox ID="TextBox1" runat="server" onblur="javascript:RecalculoAjax(this)" Width="190px"></asp:TextBox>

El ejemplo se muestra en este gif:

LINK:
GoogleDrive

PASSWORD:
https://trytocatch.wordpress.com/

Saludos.