Siempre que hacemos un formulario, necesitamos un script de validación, el problema es siempre tener un script que sea facil de usar, lo suficientemente flexible para que funcione en cualquier formulario y que sea personalizable, encontré justamente eso.
HTML de formulario para validar
Solo debemos fijarnos bien en el id del formulario y para los campos que deseamos validar agregar una clase required, email, etc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <form name="comentariosFrm" id="comentariosFrm" method="post" action=""> <ol> <li> <label>Nombre: (requerido al menos dos caracteres)</label> <input id="cname" name="name" class="required" minlength="2" /> </li> <li> <label>E-mail: (requerido)</label> <input id="cemail" name="email" class="required email" minlength="2" /> </li> <li> <label>Tu página web: (opcional)</label> <input id="curl" name="url" class="url" value="" /> </li> <li> <label>Comentarios: (requerido)</label> <textarea id="ccomentario" name="comentario" class="required"></textarea> </li> <p align="center"><input type="submit" name="submit" value="Enviar" /></p> </ol> </form> |
Agregar el validador
Primero debemos incluir la libreria jquery, el validador y con una sola linea de texto le decimos que formulario validar
1 2 3 4 5 6 7 | <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#comentariosFrm").validate(); }); </script> |
Puedes ver más ejemplos y descargar el script en la página de Bassistance
Excelente Aporte 🙂
Buen aporte
realmente ayuda, pero tengo una duda, imaginemos que valida los campos nombre, apellidos y demas, una vez que esten bien ingresados se supone que los datos deberian ser pasados a una pagina .php que procese la informacion, quisiera baber en que parte del codigo debo llamar la pagina .php es decir algo como esto
if(todo esta correcto)
{
llamar a la pagina mensaje.php
}
esas es mi duda, porque se de que relamente funciona la validacion gracias por todo
Hola, me parece que estas confundiendo la validacion en el lado del usuario con la validacion en el lado del servidor. En este post hablo de una validacion javascript en el lado del usuario por eso no requiere colocar codigo PHP sino que intercepta el evento submit y usa el action del formulario para decir a que pagina .php deben procesarse.
Adicionalmente a eso es posible validar datos via php(lado del servidor) sumado a un captcha para evitar que algun robot use nuestro formulario.
Hola!
Veo que para agregar CSS o cosas de Ajax, en formularios por ejemplo, veo que se usa mucho y … en vez de .
Pregunto:
Es que es preferible asi? cuando veo ejemplos asi y trato de adaptarlos a digamos que su traspaso no ha sido muy fluido.
Que mejoras o diferencias podria tener si usara en vez de , usara y demas mencionados? me preocuparia no tener un buen contenedor de datos que se viese mal en otros navegadores.
Tambien de que con tablas uno mete tablas dentro de otras con distintas filas y/0 columnas y no se que tal igual o sin dificultades seria con los y y .
saludos.
Este script validador agrega una etiqueta span con el mensaje de error si usaras tablas tendrias que modificar en el CSS el FLOAT y debería verse bien aunque como te digo eso varía para cada caso concreto, para evitar problemas entre navegadores usa un hoja de reseteo y a cruzar los dedos 🙂
Estoy trabajando en algo en donde incorporare este aspecto a todo lo concerniente a formularios
http://jqueryui.com/themeroller/
Y por eso la pregunta de los (div),(u),(p)(label) en vez de (table) ya que las tablas ayudan a tener todo contenido en un «marco» por asi decirlo sabemos bien y ayuda a que en distintos navegadores no se desproprociona posicionalmente las cosas, y no se si el equivalente el (div) sea igual.
Este googleapis que indico, me interesa mas por los tabs y tuve que meter en una tabla principal esto para poderlo centrar en la pagina ya que el marco del (div) se ensanchaba con la pagina y solo quiero que su ancho sea igual al ancho de la suma de los tabs.
Y todo esto, me preocupa es que luego de ya tener tanto hecho se presenten los problemas, de ahi esta asesoria.
En realidad no son equivalentes, funcionan de forma muy distinta y por experiencia no es facil pasar algo ya hecho en tablas a DIV asi que te recomendaria que mantengas tu estructura con tablas, agregues los DIV que requieras para la jquery UI y en el futuro trabajes con DIV un tutorial de como funcionan AQUI
Bueno, los div estan en una tabla padre como contenedor, pero ya dentro de esta tabla, todo lo demas es div ya que al no usarlos y cambiarlos por tablas se desparece el estilo, aunque me imagino que eso podria cambiarse el .js o .css del que se llama, alguna validacion de div cambiarse a table, no se, hago conjeturas, pero creo que con un table mayor puedo seguir como voy.
Lo que si molesta de los div o con el style aplicado es para escritos largos en una misma fila, en este caso los (p), por lo que uso y me sirve.
gracias.
Por lo que me dices estas usando de forma incorrecta los DIV, con esos ejemplos ajax no pueden reemplazar los DIV con tablas (funcionan muy distinto y ni con css o javascript van a funcionar igual) cuando se escribe codigo se usan tabulaciones y saltos de pagina no todo en una sola linea (una cuestion de orden que ayuda a entender nuestro codigo), los estilos no se escriben en linea para eso inventaron las hojas de estilos, clases, etc.
pero es que si me esta sirviendo hasta el momento o al menos lo que he agregado de estos ejemplos.
En caso de alguna confusion o mal entendido, sigo usando los div solo he puesto una table principal y dentro esto de los div y hasta el momento va bien.
hola, muy buenos tutoriales. una duda, para hacer una validacion(jquery.validate.js) y envio de ajax jquery podras orientarme como hacerle. he intenado de varias formas pero se brinca la validacion… saludos, espero puedas ayudarme.
La validación y el envío ajax interceptan el mismo evento, es decir el evento submit, debes modificar tu código para que luego de la validación se invoque recién el evento de envio, para eso agrega la siguiente línea que debe invocar al envio:
$.validator.setDefaults({
submitHandler: function() { alert(«submitted!»); }
});
Tengo un dilema tengo un formulario por parte en un acordeon con jquery, al momento que quiero utilizar el validacion tambien con jquery me desactiva el acordeon si me pueden ayudar antemano les agradezco lo que puedan hacer por mi
La validación no debe afectar el acordion seguramente lo que ocurre es que al haber un error javascript no continua ejecutándose el resto del código javascript, usando firebug o webdeveloper busca el error javascript.
Yo estoy viendo como hacer para meter sentencias if en el codigo de este tipo de validaciones en jquery.
Lo comento, porque tengo un formulario con muchos campos, y dependiendo del tipo de usuario que se este registrando (son 3 los tipos de usuario) es que el usuario llenaria todos o algunos de los campos.
Y asi como viene el ejemplo default de este validador en jquery, obviamente se queda corto.
Me toca ver como hacer para que vigile todos los campos del formulario y que obligue a llenarlos o no dependiendo del tipo de usuario que se este registrando, y asi no hacer 3 formularios de registro claro.
Buena Miguel,
Felicidades por tu gran trabajo!
Tengo una duda al invocar una llamada ajax…la cosa es que no se donde implementarla:
$(\
Oye puede validar telefonos? No puedo encontrar la funcino para hacerlo
Buen script, muchas gracias. Me gustaria saber si se puede con él validar una contraseña que fué creada por el usuario y que debe volver a escribirla para confirmarla.
Gracias nuevamente
Saludos
hola miguel queria saber si tienes algun jquery para comprobar disponibilidad de nick o de email, para que no se repitan en la BD, se lo agradesco
Cual es la clase para validar que los datos ingresados sean solo letras?
Fabulosos aportes! Muchisimas gracias por iluminar los caminos!
Estuve revisando el resto, excelentes pautas!… a partir de allí… a correr que todo es pampa! Muchas gracias!
Muy bueno, estaba buscando algo sencillo, probe algunos otros pero demaciado complicados,, Gracias
Se puede agregar mas comapos? o cambiarle en id o el name? Estoy intentando eso pero no encuentro donde cambiarlo. Gracias
Simplemente a los campos que agregues ponles la clase required, puedes usar el id y nombre que desees
Hola el tutorial fabuloso, ahora incluso verifico fechas y telefonos etc. Pero me veo con un problema y necesito de su ayuda si mientras antes no encuentro. He mirado el archivo *.js incluso intnto entender el API de validate de jquery o algo quiero ntender. Necesito saber como hacer que se envie el submit cuando este ok le pongo en actgion la web destino donde se supone quiero guardar el form en mi base de datos mysql pero aquí ya no puedo seguir, la validación ya no funciona cuando doy a submit automáticamente me manda a la web en su caso ok.php. ¿Alguien me puede guiar en este asunto? Gracias.
Buenos dias
Primero que nada muchas gracias por tus post me han servido de mucho en el tiempo que he programado web, estoy comenzando esta programacion y me has ayudado bastante. Ahora bien, tengo una pequeña duda en cuestiones del validador, es posible que este tambien valide fechas? no se cual podria ser el metodo.
De antemano Muchas gracias por la atencion.
Saludos
Si se puede, aquí esta la lista de posibles validaciones, que incluyen fechas, tarjeta de credito, telefono, numérico, etc http://docs.jquery.com/Plugins/Validation
Eso también está contemplado en la ayuda del plugin en http://docs.jquery.com/Plugins/Validation#General_Guidelines allí usan un form.submit pero puedes reemplazarlo por una invacion ajax para enviar los datos
Hola, mi pregunta es si puede detectar los campos hidden donde pones el código captcha del recaptch. Le puse la clase required pero se la salta.
Gracias