Una vez que tenga un formulario HTML en funcionamiento, a menudo querrá asegurarse de que todos los campos importantes estén completos. Por ejemplo, si va a enviar una carta de confirmación por correo electrónico, la dirección de correo electrónico debe incluirse en los campos del formulario, y debe ser una dirección de correo electrónico que funcione.

Hay dos maneras de validar sus formularios:

1. Uso de JavaScript
2. Usando un script CGI

Las ventajas de usar JavaScript para validar formularios

• Usando javascript no se utiliza ningún tiempo de procesador de servidor. Todo el procesamiento se realiza en el ordenador del cliente.
• A menudo parece funcionar más rápido que la validación CGI.
• Como la página del formulario no ha cambiado, es fácil para el lector corregir los errores.

Las desventajas de usar JavaScript para validar formularios

• JavaScript sólo funciona en los navegadores que lo tienen habilitado. Si el JavaScript está desactivado, la comprobación de errores no se realiza.

Las ventajas de usar CGI para validar formularios

• El uso de un CGI para validar asegura que cada vez que se envíe el formulario, se ejecute la validación.

Las desventajas de usar CGI para validar formularios

• CGI pone más carga en el servidor Web, y cada función que se incluye en el CGI es una tarea más para el servidor.
• CGI puede ser lento de ejecutar.
• Si hay un error, el cliente tiene que volver a la primera página del formulario, o el CGI necesita otra función para reescribir la página del formulario.

La forma en que manejo esto es hacer que la mayoría de la comprobación de errores se realice con JavaScript. De esta manera, es rápido y fácil para los lectores. Luego vuelvo a revisar los elementos vitales del formulario con el CGI.

Cómo usar JavaScript para validar formularios HTML

La premisa básica de la creación de la validación de formularios es buscar los nombres de los elementos de formulario necesarios y, si están vacíos, mostrar un mensaje de error.

La mayoría de los programas de verificación de errores verifican cada campo uno por uno y muestran un error a la vez. Esto puede hacer que llenar el formulario sea tedioso, y la gente puede detenerse en el medio. Si utiliza el siguiente script y el código fuente de Perl sabrá cómo validar un formulario completo a la vez, mostrando una serie de mensajes de error que su lector puede volver y corregir.

El JavaScript para Validar un Formulario

En la parte superior de su HTML, debe crear un script para realizar la validación del formulario:

1. Configure el script y asegúrese de que esté oculto para los navegadores que no puedan manejar JavaScript. <-- // ignore if non-JS browser
2. Ésta es la llamada de función que inicia la validación. Es una buena forma de establecer sus variables en la parte superior de su script.
   1. function Validator(theForm)

3.  { var error = ""; 

   1. Si tiene elementos desplegables en sus formularios, debe incluir la primera opción como un campo vacío (por ejemplo,

      elija uno

      ) Puede incluir cualquier texto que desee en el campo, siempre y cuando el valor esté en blanco. Luego, cuando se valide contra él, simplemente mire para ver si la primera opción (la en blanco) todavía está configurada, si lo está, escriba el mensaje de error.

      if (theForm.dd.options[0].selected == true){ 

   2. error += «Por favor, seleccione de la lista desplegable.»;}
4. 2. error += «Por favor, rellene el elemento de texto.»;}
5. Si quieres validar el tipo de datos dentro de un campo de texto, tienes que ser un poco más aficionado. Este fragmento de guión mira un cuadro de texto para ver si tiene caracteres no numéricos (la variable «digits» define lo que está buscando). >

   1.  var digits = "0123456789"; 

   2. if (theForm.number.value == «»)
   3. {
   4. error += «Por favor, introduzca un número.»
   5. }
   6. para (var i = 0; i < theForm.number.value.length; i++)
   7. {

   8.  temp = theForm.number.value.substring(i, i+1) 

   9. if (digits.indexOf(temp) == -1 && theForm.number.value != «»)
   10. {
   11. error += «El texto numérico debe ser un número.»
   12. break;

   13.  }}} 

Validar una dirección de correo electrónico con JavaScript

1. Esta parte del script muestra cómo validar una dirección de correo electrónico. Es una validación muy simple, sólo verifica que haya un signo @ y un punto. La gente todavía puede poner direcciones de correo electrónico falsas, pero esto ayuda a reducir un poco las entradas erróneas.
   1. if (theForm.email.value == «»)
2. {
3. error += «Debe incluir una dirección de correo electrónico precisa para una respuesta.»
4. }

5.  si ((theForm.email.value.indexOf ('@',0) == -1 ||| 

6.  theForm.email.value.indexOf ('.'.,0) == -1) && theForm.email.value != "") 

7. {
8. error += «Por favor, compruebe que su dirección de correo electrónico es válida»;
9. }
10. Esta es la carne del guión. Hace dos cosas: primero, comprueba si hay un error de configuración. Si la hay, la muestra como un mensaje de alerta. Luego envía el valor de retorno de false para que la información del formulario no sea enviada al servidor. Sus mensajes de error (establecidos en los anteriores si se trata de sentencias), todos incluyen un » «»al final de la línea. Esto le indica al navegador que inserte un retorno de carro (o «enter» o «new line») al final de la línea. Entonces, si hay varios mensajes de error, todos estarán en líneas separadas. Si no hay mensajes de error configurados, entonces la variable error estará en blanco (desde donde la configuramos en la parte superior del script), por lo que la información del formulario será enviada al servidor para que el CGI actúe sobre ella.

    1.  if (error != "") 

1. {

2.  alert(error); 

3. return (false);

4.  } else { 

5. return (true);
6. }
7. No olvides cerrar tu guión.
   1. }

8.  // --> 

Luego, para llamar al script, ponga un elemento onsubmit en la etiqueta del formulario:

«.

CGI para Validar Formularios

Este fragmento CGI del script Perl hace lo mismo que el JavaScript. Verifica si los campos obligatorios están ahí y, en caso contrario, guarda un mensaje de error en una variable para su visualización:

 $error += "
{
>si ($in{'dd'} eq "")
$error = "";
#!/usr/local/bin/perl