Introduccion a JavaScript

Introducción a JavaScript Parte 7

Las formas (Form Inputs) son muy importantes para algunas páginas web. La entrada de las formas es enviada al servidor la mayoría de las veces. Primero quiero mostrale como se puede validar una forma. Entonces daremos un vistazo a las posibilidades de dar información al cliente con JavaScript o con HTML.

Primero que todo, queremos crear un simple script. La página de HTML contendrá dos elementos de texto. El usuario tiene que escribir su nombre dentro del primer elemento y su dirección e-mail dentro del segundo. Usted puede escribir cualquier cosa dentro de algún elemento de la forma y luego presionar el botón. También intentelo no escribiendo nada y presionando el botón.

Con respecto a la entrada del primer elemento, usted recibirá un mensaje de error si no escribe nada. Cualquier entrada es vista como válida. Porsupuesto, esto no previene al usuario de escribir un nombre errado. El browser inclusive acepta números. De tal manera que si usted escribe 27, el mensaje será 'Hola 27!'.
La segunda forma es un poquito mas sofisticada. Trate de escribir una entrada simple, como su nombre por ejemplo. No trabajará (a menos de que usted tenga una @ en su nombre...). El criterio para aceptar la entrada como una dirección e-mail válida es la @. Una simple @ lo hará funcionar, aunque esto no es bastante significativo. Toda dirección e-mail en Internet tiene una @, por esto es apropiado buscar una @ aquí.

Como luce el script para las dos 'form input' y para la validación de estos? Aquí va:

<html>
<head>
<script language="JavaScript">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("Por favor escriba su entrada!")
  else { 
   alert("Hola "+form.text1.value+"! Su entrada es correcta!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("Direccion e-mail no valida!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Escriba su nombre:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Comprobacion" onClick="test1(this.form)">
<P>
Escriba su direccion e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Comprobacion" onClick="test2(this.form)">
</body>

Primero observemos el código HTML en la sección 'body'. Solamente creamos dos elementos de texto y dos botones. Los botones invocan la función test1(...) o test2(...) dependiendo de que botón es presionado. Pasamos this.form a las funciones para que sea posible direccionar los elementos correctos en las funciones mas adelante.
La función test1(form) comprueba si la entrada es vacía. Esto es hecho por medio de form.text1. Para ver si la entrada es vacía la comparamos con "". Si la entrada iguala a "" entonces nada fue escrito. El usuario obtendrá un mensaje de error. Si algo es escrito el usuario recibirá un ok.
El problema aquí es que el usuario puede entrar solo espacios. Esto es visto como una entrada válida! Si usted también quiere, usted puede porsupuesto mirar estas posibilidades y excluirlas. Creo que con la información dada aquí esto es completamente fácil.
Ahora miremos la función test2(form). Esta función de nuevo compara la entrada con el equivalente a "" para estar seguro de que algo a sido escrito. Pero hemos agregado algo al comando 'if'. El || es llamado el operador OR. Usted aprendióo acerca de ellos en la sección 6 de esta introducción.
El comando if chequea si cualquiera de las dos comparaciones, la primera y la segunda son reales. Si por lo menos una de ellas es verdadera el comando if lo toma como real y el siguiente comando será ejecutado. Esto significa que usted obtendrá un mensaje de error si no escribió nada o si no hay una @ en su entrada. La segunda operación en el comando if es vista si la entrada contiene una @.

Cuáles son las diferentes posibilidades que existen de enviar el contenido de una forma?. La manera más fácil de enviar el contenido de una forma es via e-mail. Este es el método que vamos a observar un poco más de cerca. Si usted desea que la gente le envie sus comentarios sin utilizar e-mail y que el servidor manipule la información por si solo, deberá utilizar CGI (Common Gateway Interface). Usted necesitará CGI si por ejemplo desea tener elementos de busqueda en su página como YAHOO en donde el usuario recibe un resultado rápido después de dar su entrada en una FORMA. El no tiene que esperar hasta que la gente lea su entrada, manipule la información y le envien una respuesta. Esto es hecho automaticamente por el servidor. JavaScript no posee la funcionalidad de hacer cosas como esta. Inclusive si usted crear un 'guestbook', no puede hacer que el servidor adicione información a una página HTML con JavaScript. Solo CGI es capaz de hacer esto por el momento. Por supuesto usted puede crear un guestbook respondiendo a la gente via e-mail. Aunque usted tiene que escribir toda la información que recibirá el usuario. Esto es perfecto si usted no espera recibir por lo menos cien e-mails al dóa.
Este script es puro HTML. JavaScript no es necesitado aquí! Solo, si usted desea chequear la entrada en la forma como lo vimos atrás. Hay que tener en cuenta que el comando mailto no funciona para todos los browsers.

<FORM METHOD=POST ACTION="mailto:aqui_va@su_direccion_e-mail">
<H3>Le gusta esta pagina?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">No del todo.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Es una perdida de tiempo.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">El peor sitio en la red.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>

Usted obtendrá el resultado via e-mail haciendo esto. El_único problema es que recibirá un mail que puede parecer un poco encriptado a primera vista. Algunas veces todos los espacios son llenados con un signo '+' y otras veces son llenados con '%20'. Es+algo+mas+o+menos+asi.Creo que existen algunos buenos programas en la Red que pondrían el mensaje en una forma mas agradable.

Existe otra cosa interesante que pueden hacer sus elementos de FORMAS un poco mas amigables. Usted puede definir cual elemento es enfocado al comienzo. O usted puede decirle al browser que enfoque la forma donde la entrada del usuario fue errónea. Esto significa que el browser pondrá el cursor en el elemento de la forma especificada de modo que el usuario no tiene que hacer click en esta antes de escribir algo. Esto lo puede hacer mediante el siguiente script:

function setfocus() {
        document.first.text1.focus();
        return;
}

Esta función enfocaría el primer elemento de texto en el script que mostré arriba. Se debe especificar el nombre completo de la FORMA la cual aqui es llamada first y el nombre del simple elemento de la forma, aquí text1. Si usted quiere enfocar este elemento cuando la página es cargada, es necesario agregar la propiedad onLoad a su tag <body>. Este luce mas o menos así:

<body onLoad="setfocus()">

Indice - Parte 1 - Parte 2 - Parte 3 - Parte 4 - Parte 5 - Parte 6