viernes, 12 de marzo de 2010

Validar campos con javascript en xhtml

bueno, lo prometido es deuda, y empezaremos con una breve introduccion a javascript.
Javascript es un lenguaje de programacion tipo script que se ejecuta del lado del cliente, osea en mi navegador. 

con javascript a diferencia de la mayoria de los lenguajes de programacion, las variables no necesitan indicarle que tipo de valor contendran. asi esta toma el valor (string, integer, double) segun sea la asignacion a la misma.

bueno para aquellos que poseen alguna nocion de algun lenguaje de programacion, javascript les resultara bastante facil, y para los que no han programado antes... tambien les resultara facil :D.

Validar Campos es importantisimo a la hora de crear aplicaciones que se conecten a bases de datos, para evitar que esta se llene de informacion incorrecta, lo que veremos ahora es como evitar que en un campo de texto (nombre por ejemplo) se introduzan numero, o que algun campo obligatorio(password podria ser) quede vacio, y muestre una alerta al usuario indicando el mensaje.




Vamos iniciar con un pequeño ejemplo para conocer mejor javascript, sus sintaxis y como usar algunas funciones y eventos.
<html>
 <head><title>Validar con JavaScript</title>
  <script language='javascript'>
   function validar_envio(){
    //validar nombre ingreso
    if (document.formu.nombre.value.length==0){
      alert('Ingrese nombre');
      document.formu.nombre.focus();
      return 0;
    }
    nombre=document.formu.nombre.value;
    lon=document.formu.nombre.value.length;
    for (i=0;i<lon;i++){
       flag=isNaN(nombre[i]);
       if (flag==false){
          alert('Nombre si Numeros');
          nombre.focus();
          break;
       }
    }
}
</script>
</head>
<body>
     <form name='formu'>
     Nombre:<input type='text' name='nombre' /><br />
     <input type='submit' name='dale' Onclick='validar_envio()' />
     </form>
     </body>
    </html>

para validar mas de un campo, hasta donde yo se (que es poco), seria una funcion por campo, pero les prometo que voy a ver como hacer para que una unica funcion valide todos los campos. esperen la otra entrada :)

bueno ahora una pequeña expliacacion de algunas partes del codigo

  • isNaN (respetando Mayuscula): es una funcion existente de javascript la cual devuleve true en caso que el variable a evaluar sea distinta de un numero (Is NOT a NUMBER), la usamos en flag==false; porque si es false es que la variable si es un numero
  • OnClick:Ese es el metodo por el cual la funcion es llamada, es un metodo ya establecido de javascript, entre otros meodos pueden ser:OnMouseOver, OnMouseOut, OnLoad
  • document.formu.nombre.value.length y document.formu.nombre.value. eh aqui la importancia que mecione en mi entrada anterior acerca de ponerle el atributo name a los elementos del formulario, esas lineas representan el valor y la longitud de la caja de texto nombre que se encuentra dentro del formularioformu, asi mismo con length, que extrae el la longitud de la cadena de texto de nombre
  • FOR. el for es usado para evaluar cada letra del campo de texto, osea pueda ser que hallas ingresado en todo el nombre solo un numero (cubias8) eso en un dato incorrecto para una base de datos, por lo cual es necesario evaluar cada letra del contenido, por eso nom[i]

Aca dejo el codigo por si por alguna situacion no te funciona:
CODIGO
y un manual de javascript donde explican mas detalladamente el uso de motodos,variables y funciones:
Manual JavaScrip--Download


bueno lo prometido es deuda, aca esta la otra entrada para validar campos con una sola funcion.
http://gnuteam.blogspot.com/2010/04/validar-campos-con-javascript-2do.html

0 comentarios:

Publicar un comentario