Validar formulario con jQuery on blur
Una de las formas más comunes de validar formularios con jQuery podría ser que tras finalizar el usuario de escribir en el input y salirse de él se valide lo introducido en el lado del cliente.
Explicaremos con detelle como se valida el campo «name» del ejemplo que se ilustra en este artículo.
Lo primero que deberemos hacer como casi siempre que trabajamos con jQuery es incluir las librerías y estilos que toquen en nuestro <head>:
<link rel="stylesheet" href="general.css" type="text/css" media="screen" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="validation.js"></script>
En la hoja de estilos «general.css» incluiremos los estilos necesarios para mostrar el formulario y los estilos para la muestra de los errores.
A continuación veremos que el archivo clave es el «validation.js» que es donde deberemos emplear toda la lógica de validación.
En el <body> de nuestra página tendremos un formulario similar al siguiente:
<form method="post" id="customForm" action=""> <div> <label for="name">Name</label> <input id="name" name="name" type="text" /> <span id="nameInfo"></span> </div> ... <div> <input id="send" name="send" type="submit" value="Send" /> </div> </form>
Para validar con jQuery tendremos que tener muy en cuenta la id del input para tratarlo. En el caso del campo nombre, tendremos en cuenta su id=»name».
El archivo «validation.js» estará listo o pendiente a los eventos que sucedan dentro del formulario.
Lo primero que haremos es guardar en una variable la id del campo a tratar de la siguiente forma:
var name = $("#name");
Seguidamente llamaríamos al evento blur que se encargará de ejecutar la función «validateName» cada vez que nos salgamos del campo con id=»name».
name.blur(validateName);
La función es la siguiente y simplemente se encarga de mirar si el campo con id=»name» tiene más de un carácter. Si no lo tiene, mostrará un error a su lado al salirse y si hay más de un carácter no se mostrará nada. Como puedes observar, en este caso estamos validando de forma sencilla pero se podría complicar en función de los requerimientos.
function validateName(){
//Si no se ha introducido nada en el campo
if(name.val().length < 1){
name.addClass("error");
nameInfo.text("Debe rellenar su nombre!");
nameInfo.addClass("error");
return false;
}
//si se ha introducido valor
else {
name.removeClass("error");
nameInfo.text("");
nameInfo.removeClass("error");
return true;
}
}
Esto lo haremos por todas las variables que queramos validar.
Si los campos son correctos y se pulsase el botón de «enviar» se enviaría la información al servidor para tratarla con PHP.
Autor
¿Buscas trabajo de programador?
5 respuestas a “Validar formulario con jQuery on blur”
Deja una respuesta
103 artículos que te podrían interesar
Ver más sobre
Saludos Cordiales
Tal vez puedes publicar todo el código por favor
Excelente amigo saludos desde chile (y)
Hahah, Mon portable s’est écrasé quand je regardais ce site la dernière fois que j’étais ici. Et pour les 2 derniers mois, j’ai été la recherche de ce blog, j’ai tellement reconnaissante qu’elle trouve une fois de plus! : D
I would like to take the chance of saying thanks to you for the professional assistance I have enjoyed checking out your site. I’m looking forward to the commencement of my school research and the complete groundwork would never have been complete without dropping by your site. If I might be of any help to others, I will be glad to help by means of what I have discovered from here.
i think im pregnant