Guerra FW + JS |PRIMER DESAFÍO|

Calisco · #1 (**permalink**) 10/07/2007, 11:39

Este es el post introductorio de la Guerra de los FrameWorks.
Primer Desafío.
Título: Validación de Formulario.
versión: 1.00
Objetivo:
Se necesita implementar un script para validar los siguientes tipos de campos de un formulario.

Validación simple de nombre de usuario (text) (mínimo 4 caracteres máximo 10: alfabeto mayúsculo y minúsculo, pero sin tildes ni eñes, puntos, guiones bajos y números))
Campo Tipo Email: tiene que validar un formato tipo email (text, usuario, arroba, dominio).
Validación de contraseña y confirmación de la contraseña (password).
Medidor de contraseña segura (criterios a escoger libremente)
Campo Tipo Fecha: validar (con máscara) una fecha tipo 28/12/2007.
Campo Tipo Teléfono: (54) 298 - 3456 1234
Edad actual (text): Sólo dos caracteres, y que sean números.

La validación de fecha y teléfono muy similar. Son dos ejemplos de un mismo tipo de validación ... donde se define una máscara de entrada, rango de valores, etc.

Se va a calificar:

* Cantidad y Calidad de Código.
* Calidad y eficiencia de interfaz (eventos, mensajes emergentes, etc).
* Compatibilidad en browrsers.
* Validacion CSS y xHTML en W3C

Si alguien tiene alguna crítica sobre el desafío tiene un día para proponer mejoras o correcciones. Si todo sigue sobre su curso normal mañana arranca el desafío tal cual está. Por otro lado, todas las propuestas tienen que estar enmarcadas dentro del eje del mismo. También es importante tener en cuenta que esta es la versión 1.0 y mas adelante se pueden plantear nuevas versiones producto de un aumento de complejidad.

Nota: Este post seguramente se irá reeditando.

caricatos · #2 (**permalink**) 11/07/2007, 01:32

Hola:

Un par de preguntillas... las expresiones regulares a utilizar ya suelen estar hechas, así que tal vez sea mejor facilitarlas (es uno de mis puntos débiles, y casi siempre recurro a "San Google"...

)

Y lo de máscaras no sé a lo que te refieres... y por cierto, el formato del teléfono no lo reconozco (en España suelen ser nueve números y en llamadas internacionales hay que empezar por 0034)

Saludos

Calisco · #3 (**permalink**) 11/07/2007, 07:20

Respecto a lo de las expresiones regulares ... realmente hago agua en este tema o no lo se como lo debería. Tengo que ponerme a estudiarlas para hacer las validaciones correspondinetes.
Respecto a las máscaras ... te muestro un ejemplo que justamente es una clase hecha con MooTools. Fijate como actúa las campoas tipo ID, telefonos, etc.
Y esto de alguna manera responde al tipo de código de tu país. La idea es que vos puedas definir y adaptar la máscara del campo que quieras. Si tu código requiere 9 enteros, compuestos por tres grupos de números ... tu script debería poder implementar esta funcionalidad.
Observa el ejemplo.

Saludos.

MaBoRaK · #4 (**permalink**) 11/07/2007, 10:01

loading............

Con máscara... osea que se valide mientras se escribe.

connection closed.

Calisco · #5 (**permalink**) 11/07/2007, 10:43

Similar es este ejemplo. Saludos.

Holden · #6 (**permalink**) 12/07/2007, 11:21

Cita:

Iniciado por Calisco

Similar es este ejemplo. Saludos.

Uf ya me parecia extraña la forma en que se implementaba la mascara.
Así como está no pasa las validaciones de la w3c.
Es un gran punto a mejorar del ejemplo que pasaste!

Lindo sistema de mascaras...

Calisco · #7 (**permalink**) 13/07/2007, 17:40

Bueno, una de las metas es que valide.

GatorV · #8 (**permalink**) 17/07/2007, 21:41

Cual es el tiempo limite para esto?

Calisco · #9 (**permalink**) 18/07/2007, 05:39

No lo se ... por el momento no hay un solo script. Yo creo que hasta que no haya al menos un par no lo cerramos.

caricatos · #10 (**permalink**) 18/07/2007, 10:44

Hola:

En mi opinión, la falta de éxito de la convocatoria se debe a que una máscara de entrada de datos no es una cosa normal... simplemente no pienso presentar nada porque tampoco respondo temas que no controlo... espero que la próxima convocatoria sea algo más normal... ¡Hay tantas cosas...

...!

Saludos

MaBoRaK · #11 (**permalink**) 18/07/2007, 15:44

loading...........

Pasa que hacer una máscara no es difícil sinó moroso.

connection closed.

derkenuke · #12 (**permalink**) 18/07/2007, 18:52

Lo de la máscara sería un tema (escabroso) a tratar aparte. Hice una máscara para un campo de tipo HH:MM que funcionaba bastante bien, aunque no he conseguido hacer una general, lleva bastantes quebraderos de cabeza.

Aunque al no verlo en ninguna web, no le he puesto demasiado entusiasmo a la cosa.

Por lo demás, el resto de campos se podrían validar con una simple expresión regular, a la que no le veo complicación en cuanto a que algunas se pueden encontrar (email) y otras son básicas (dd/mm/aaaa).

Código PHP:

  <label for="edad">Edad (2 d&#237;gitos)</label>
<input type="text" name="edad" id="edad" maxlength="2" size="2" onblur="valida(this,/^\d\d$/)" />


<script type="text/javascript">
function valida(campo,regex) {
    if( !regex.test(campo.value) )
        mostrarError(campo);
    else
        ocultarError(campo);
}
</script>

Esa misma función valida() valdría para todo este tipo de campos. Y normalmente las fechas habría que validarlas con el objeto Date() o con un par de selects para escoger el día, mes y año.

Tendría más cuerpo la cuestión de Medidor de contraseña segura (criterios a escoger libremente), en esa sí que habría que batallar un poco más, y me parece algo interesante para investigar.

Mi propuesta es que se trabajen, además de un par de campos de este tipo (validar con expresiones regulares), trabajar con selects, checkbox y radios, que es más "divertido".

Un saludo.

Holden · #13 (**permalink**) 19/07/2007, 10:22

Yo personalmente no le estoy dando importancia a las máscaras...
Termino de readaptar unas cosillas y presentaré mi form.

Sería bueno que presenten lo que se pueda resolver asi tenemos varias alternativas. Es aburrido sino.

Calisco · #14 (**permalink**) 19/07/2007, 11:19

Ok ... puede que no sea el mejor de los desafíos, pero nos tendríamos que encerrar en lo que se ha implementado, sea bueno o malo; porque si cada uno va a tomarselo a la manera que mejor le parezca o le cuadre, entonces no hay un desafío definido y por consiguiente no se puede comparar.
Yo también lo estoy haciendo.
Y como leí por ahi, también estaría bueno presentar el script funcionando.
Saludos.

GatorV · #15 (**permalink**) 20/07/2007, 12:03

Pues ya que nadie se anima publico el mio jeje:

http://www.gkdev.net/fdw/desafiojs/validador/

Saludos

ojo este es parte de mi framework jeje asi que viene complementado con otros validadores via Server pero para solo demostrar el javascript fue quitada esta parte.

Holden · #16 (**permalink**) 22/07/2007, 17:15

Bueno paso mi validador que no es mas ni menos que mi viejo validator de prototype readaptado y corriendo con mootols. Verdaderamente mootools es la evolución de prototype y la documentación es excelente. Sin dudar es hoy por hoy mi fwk de cabecera.

De todas las consignas propuestas la única que no cumplí es la de usar máscaras.

http://www.hvaldez.com.ar/validator/

Aguardo con ansías todas las críticas je je je... quisiera poder mejorarlo y ampliar el TO-DO list.

Saludos

Holden · #17 (**permalink**) 22/07/2007, 17:24

Cita:

Iniciado por GatorV

Pues ya que nadie se anima publico el mio jeje:

http://www.gkdev.net/fdw/desafiojs/validador/

Saludos

ojo este es parte de mi framework jeje asi que viene complementado con otros validadores via Server pero para solo demostrar el javascript fue quitada esta parte.

Felicitaciones por ser el 1ero en postear.

Tengo dos indicaciones:
1- me dejó escribir como fecha 29/02/2007 y 30/02/2007

2- me dejó ingresar una ñ y _ en el username.
Los pasos que seguí para fueron:
a- apretar enviar sin cargar ningun dato
b- poner un usuario válido y apretar enviar
c- agregar ñ y _ al usuario y apretar enviar
d- completar el resto del form y enviar -> se envio el post...

No es de criticón... pero si lo estas usando en producción tal vez te ahorres un dolorcito de cabeza. :D

Saludos

Calisco · #18 (**permalink**) 22/07/2007, 17:31

yo estoy mas que atareado con unos trabajitos ... pero ni bien tenga la posibilidad lo implemento. Saludos.

GatorV · #19 (**permalink**) 23/07/2007, 07:59

@Holden:

Si lo se, jeje pero esque como comente, todo esto tmb va validado via Server, y ahi si te valida todo eso, la validacion javascript solo es como previa para validar datos que pudieran faltar, pero aun con javascript desactivado en el server se validan todos los datos

ivor · #20 (**permalink**) 24/07/2007, 20:45

Cita:

Iniciado por Holden

Bueno paso mi validador que no es mas ni menos que mi viejo validator de prototype readaptado y corriendo con mootols. Verdaderamente mootools es la evolución de prototype y la documentación es excelente. Sin dudar es hoy por hoy mi fwk de cabecera.

De todas las consignas propuestas la única que no cumplí es la de usar máscaras.

http://www.hvaldez.com.ar/validator/

Aguardo con ansías todas las críticas je je je... quisiera poder mejorarlo y ampliar el TO-DO list.

Saludos

se ve bastante joomla

jeje pero

me gusta

kepawe · #21 (**permalink**) 25/07/2007, 00:36

Hola a todos.

Holden es tu validator hay dos campos relacionados, edad y fecha de nacimiento
, puede poner que naceré el 30/03/2008, siempre es bueno avisar con antelación

y poner en el campo edad 18 años.

Por lo demás esta muy bien.
Salu2.

derkenuke · #22 (**permalink**) 25/07/2007, 03:55

Bueno, al final implementé mi solución. Lo intenté con máscaras... pero se me hizo demasiado complicado. Al final simplifiqué el problema sin dejar escribir los caracteres que no deben escribirse.

Desafío1 - validación simple de formulario

Quizás he tenido algún problema con la escritura de las fechas, a la hora de modificarla una vez ya está escrita.

Creo que lo he tenido en cuenta todo

, a ver qué os parece.

Un saludo

Holden · #23 (**permalink**) 25/07/2007, 06:23

Cita:

Iniciado por kepawe

Hola a todos.

Holden es tu validator hay dos campos relacionados, edad y fecha de nacimiento
, puede poner que naceré el 30/03/2008, siempre es bueno avisar con antelación

y poner en el campo edad 18 años.

Por lo demás esta muy bien.
Salu2.

Esta puesto a drede para validar un ingreso númerico, estaba con poca imaginación

En general la edad no se pide. siempre la uso calculada.
Grax por el feedback

Holden · #24 (**permalink**) 25/07/2007, 06:25

Cuando se postean conclusiones y demas cosas? cuando termina este desafio?

Calisco · #25 (**permalink**) 25/07/2007, 12:28

Puede ser unos dias mas ?. Hoy arranqué con este validador ... de todas forma, tal vez puede quedar abierto pra que mas adelante sigan apareciendo nuevas implementaciones. No hay porque cerrar el desafío; me parece.

derkenuke · #26 (**permalink**) 26/07/2007, 19:07

Voy a comentar un poquito los scripts que se han ido publicando ok?

GatorV - http://www.gkdev.net/fdw/desafiojs/validador/
Además de deber poner el formato en cada campo (no se sabe qué se restringe ni qué se permite) hay que mejorar algunas cosillas:

Completar lo que dijo Holden de las fechas, y es que a mi me dejaba escribir 40/30/2005. ¿Qué valida exactamente?
Además he visto esto: Sigue mis pasos. En Contraseña escribimos: "hola". En Repetir escribimos "holam". Le damos al botón. Sale el mensaje de que no son iguales. Escribimos una "m" más en contraseña, entonces coinciden los campos, y se borra el mensaje. Hasta ahí bien. Metemos una "m" más en Contraseña, enviamos y sale el mensaje de que no coinciden. Completamos con una "m" en Repetir y ¿qué ocurre? Por mucho que le demos no se borra el mensaje aunque las contraseñas son iguales.
Creo que pasa siempre que completamos el Repetir. ¿Qué está ocurriendo?
En el campo Edad me ha dejado meter "00" (pero creo que ese error también lo tengo yo, estoy pendiente de solucionarlo).
Prueba a ir escribiendo una "a" en el Nombre de Usuario, y dale a Enviar. Sale el mensaje. Escribe otra "a" al lado y dale a enviar. Al de 4 "a"es se borra el mensaje (como cabe esperar) pero llegamos a 10, 11, 12... y no aparece otra vez el mensaje de que nos sobrepasamos de 10 caracteres...
Con el email no me meto, depende de la expresión regular, es sencillo.
En el campo de teléfono no he visto ninguna anomalía, creo que era el más sencillo.

No he visto más.

Más cosas, te toca a ti Holden

Holden - http://www.hvaldez.com.ar/validator/

En el nombre de usuario me dejó escribir números, pero no me dejó escribir puntos, guiones, barras bajas... Quizá me expresé mal en el enunciado. Tendría que haber escrito:
Validación simple de nombre de usuario (text) (mínimo 4 caracteres máximo 10: alfabeto mayúsculo y minúsculo, puntos, guiones bajos y números; pero sin tildes ni eñes)
De todas maneras el mínimo es 4, y tú has puesto mínimo 5 (o longitud > 4). Y me dejó meter símbolos y espacios: "uno!"·$%&/()=?¿¡'|@ a"
No me dejó escribir la edad con el teclado numérico, y también se puede poner "0" y "00".
En el campo fecha dices que has validado que sólo sean números, pero 12/12/4008 me la dió como inválida, así como 02/01/3020 y esas fechas gigantescas. También entró bien "02/01/2020a" y "a02/01/2020a".
En el teléfono coló "11-11-1111-11111111111" (demasiados 1s al final), incluso "11-11-1111-1111111asdas" y "11-11-1111-1111a". De hecho "hola que tal 11-11-1111-1111aaa" también va, así que parece que busca el formato y si lo encuentra bien, y si no, adios.

No he visto más cosas.

¿Por qué estaré tan criticón hoy? jeje.

Espero que me critiquéis el mio por lo menos el doble que lo que he criticado yo por favor

Cosas que me gustaría mejorar del mío:

Que no se pueda poner "00" en la edad, que sea una edad coherente (tipo > 10 años)
Que se pueda hacer ctrl+v para escribir contenido.
¿Os gustó el medidor de la contraseña? Iba a hacer un copy paste, pero como no había hecho nunca un medidor... Al final resultó sencillito y todo. El nivel más alto se consigue con minusculas+mayusculas+numeros+simbolos, y una considerable longitud.
¿Y cómo veis el tema de lo que yo he hecho de restringir el escribir algunos caracteres? Es que al principio dudaba porque es un poco bestia... pero así el visitante es un poco difícil que se equivoque... pero si falla el script... mal.
No lo he testeado más que en IE6 y en FF2...

Decidme cosas por favor.

Conclusiones de la programación, como legibilidad, velocidad, documentación, velocidad y puesta en escena no he puesto escrito ni pensado, esperaré un poquito más a que madure el post...

caricatos, ¿te vas a animar a hacer uno aunque sea sin mascaras? Ya ves que nadie ha hecho al final...
¿Qué hay de los demás participantes? ¿panino?

Bueno, un saludo, a ver si vamos cerrando esto después de las conclusiones, y pasamos a algo de programación más interesante, que este ha tenido lo suyo si lo hacemos como yo, pero poquito.

MaBoRaK · #27 (**permalink**) 26/03/2008, 10:53

loading..............

sigue en linea la competencia? :D

connection closed.

derkenuke · #28 (**permalink**) 26/03/2008, 11:12

No sé, se quedó el tema muy mudo con mi chapa-post.

Yo sigo abierto a nuevos intentos...

caricatos · #29 (**permalink**) 26/03/2008, 12:32

Hola:

Creo que solo hace falta una propuesta coherente... en mi caso, cuando veo que alguien quiere que salgan enanitos de algún rincón, y que el cursor persiga mariposas con una red y luego te envíen una donación pay-pal de 1000 euros, simplemente no le hago el más mínimo caso... con esto quiero decir que las propuestas no sean demasiado complejas.

Saludos

caricatos · #30 (**permalink**) 01/04/2008, 02:22

Hola:

Creo que tengo una propuesta, basada en este mensaje: añadir name="userfile[]" a script de http://the-stickman.com/ de upload multiple file, como verán, puse en las FAQs una versión que según comenta brainstorm falla en IE6.

La propuesta sería desarrollar un sistema de archivos adjuntos con las opciones de borrar, tal vez deshabilitar... validar, etc.

Mientras veré como responder la última cuestión.

Saludos