Check the new version here

Popular channels

Validando formulario Con Jquery

En el anterior post les explique de que trata el proyecto, pues bien les dejo en enlace

Creando un formulario con jquery, ajas, php

Es obligatorio seguir el manual desde cero para no perderse. aquí continuamos.

una ves que tengamos los campos del formulario, le agregaremos a cada campo un nuevo label, que llevara por clase "error" y "error_nombrecampo"



Como podemos ver debajo de cada input tenemos un nuevo label con la clase "error" y la clase "error_campo".



Esto es debido a que dando uso de jquery Ocultaremos Todos los labeles que contengan la clase error. y con la clase "error_campo" se mostrara si el campo esta vacio, al momento de ir evaluandolo ¿simple verdad?

Tema uno: crear y vincular el archivo js

Paso uno: creamos una nueva carpeta que se llame "js" y dentro de ella un nuevo archivo que se llame "form.js"

Paso dos: A recordar para trabajar con jquery se debe cargar la libreria ya sea desde un CDN o localmente.

Paso tres: Vinculamos nuestro archivo.



Tema dos: Crear y entender el archivo JS

Como primer paso simpre sera indicar que una ves que el documento este cargado completamente las funciones programadas por Jquery entren en accion.

Para nuevemante decirle que lo primero que haga sea ocultar los labeles de la clase error.





Como segundo paso sera detectar el clic del boton enviar, esto lo haremos con el ID del boton enviar, que en este caso es "send"



Paso 3:
Una ves que se le da clic al boton enviar se inicia a procesar los datos esto lo haremos tomando el valor value de cada input, haciendo referencia a su "ID"



Como pueden ver le di los commentarios necesarios a las lineas para que sea comprensible.



Ven que simple es le dejare parte del codigo pero haganlo ustedes vale.





Apunte muy importante para el textarea solo nos referiremos con el id:

var men = $("#mensaje".val();
if (men == "" {
$(".error-mensaje".show();
$("#mensaje".focus(
$("#mensaje".css( "background","#ef9c00" )
);
return false;
}



Descargar Ejemplo


sigueme por facebook twitter google+ Regalale una visita a esta pagina ->> Blog Inmobiliairia Sommer cancun
0
0
0
0
0No comments yet