En el post anterior vimos un modulo basico de registro de datos en php, pero el ejemplo aún no esta terminado, posee errores de principiante y lo pero errores fatales.
El problema principal del ejemplo es que cualquier dato incorrecto que escribamos en el formulario hará que el proceso de registro falle, así que para evitar esto debemos incluir validaciones.
La validación es el proceso mediante el cual un programa selecciona cuales son los datos correctos de los incorrectos, antes de ser procesados, para esto nos valdremos de códigos en javascript que nos permitirán evaluar los datos.
Recuerde, Un programa puede ser muy bueno, pero no hay software que tolere la incompetencia humana
Vamos con las primeras modificaciones
La primer validacion la incorporaremos en el campo clave, tal y como vemos en la siguiente imagen:
A traves de javascript sabemos que los objetos o etiquetas de html no solo tienen atributos, sino tambien poseen eventos. Los eventos son sucesos que los usuarios llevamos a efecto (en su mayoria) y que van a dar como resultado la ejecución de una funcion de javascript.
Asi que la primera modificación fué agregar al input del campo clave el evento «onblur»; este evento se produce cuando dejamos la casilla para pasarnos a otra ya sea con el teclado(usando la tecla de tabulador) o con el ratón (haciendo click en otro objeto) a esto se le llama perder el foco. El evento onblur hace una llamada a la funcion «numero()».
La función «numero()» esta definida en el head de la pagina, la encontramos como «function numero()({«, dentro de esta encontramos un «if» en el cual, si vamos del parentesis mas interno, se trata de convertir a traves de la instrucción parseInt, el valor del campo clave al cual accedemos como «document.ficha.c.value», pero como la conversión a veces no es posible, usamos la instruccion «isNaN» para verificar si fue posible la conversión.
Cuando se trata de hacer una conversión de cadena a valor entero y no es posible convertirlo, simplemente porque lo que se almaceno no es un numero se produce como resultado un valor «NaN» que significa «No aplicable».
Así que si no se trata de un número, se presentara con alert un mensaje indicandolo y el foco sera regresado al mismo campo, para que se intente escribir correctamente, tal y como vemos en la imagen siguiente
Nuestra siguiente modificación tiene que ver con los campos obligatorios, sabemos que en todo formulario siempre existira una serie de campos indispensables que no podremos dejar en blanco, así que debemos evitar que la información se mande, cuando uno de estos campos no ha sido capturado, para ello veamos la siguiente imagen:
Lo primero a modificar es el boton de envio, observe que cambios el < input type=»submit», por un <input type=»button», lo que genera un boton que no envia información, pero que al hacer click en el ejecuta una función en javascript llamada «enviar();» a traves del evento onclick.
La función javascript la encontramos en el head de la pagina, en esta función podemos ver que se declara uan variable x con un valor de cero y a traves de varios if se hace una revision de los campos y si algun campo esta vacio se cambia el valor de x a 1, con esto finalmente verificamos el valor de x, si x cambio su valor a 1 aparecera un mensaje indicando que los datos estan incompletos, y si x no cambio su valor entonces se envia el formulario a traves del metodo submit().
Observe que javascript maneja una nomenclatura llamada JSON, a traves de la cual podemos acceder a los elementos de la pagina web como una jerarquia de elementos, donde el nodo raiz es el objeto document, de tal forma que en la linea
document.ficha.c.value
lo que describimos es el camino para llegar al objeto que deseamos el cual es:
- Raiz: document
- Formulario: ficha
- Campo del formulario: c
- Atributo del campo c: value
Para que esto sea posible todas las etiquetas correspondientes a los elementos de la pagina (inputs, formularios, tablas, imagenes, etc.) deben tener asignado su atributo name ya que observe que lo que colocamos es el nombre de cada elemento.
Para saber mas de esto consulte el capitulo correpondiente a DOM en el manual de ajax, que se encuentra en la sección de manuales de este blog.
Ya para terminar coloco el enlace a los archivos de este ejemplo para que lo puedan descargar
https://www.sugarsync.com/pf/D280440_6119225_819501
Sistemasumma.com 