Estos son algunos consejos sobre cómo validar formularios con JavaScript o CGI

Estos son algunos consejos sobre cómo validar formularios con JavaScript o CGI

Estos son algunos consejos sobre cómo validar formularios con JavaScript o CGI

VALORACIÓN DEL ARTÍCULO:
5/5


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

Índice de contenidos

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.»;}
    1. error += «Por favor, rellene el elemento de texto.»;}
  4. 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

Por favor, seleccione en el cuadro desplegable.
.»;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>}
si ($in{‘words’} eq «»)
{
>$error += «
Por favor, incluya algunas palabras en el cuadro de texto.»;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>}
# …. continuar validando todos los campos
si ($error)
print «Tipo de contenido: text/html»;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>print « head body&gt An Error Has Occurred

;;
print $error ;
imprimir «Por favor, regrese y corrija estos errores.»;
print « # Continúa con el CGI…

La diferencia con la forma en que el CGI escribe el mensaje de error es que en lugar de un «»utiliza el tag HTML de párrafo para poner una nueva línea entre cada error.

Y ahora ha validado su formulario

Con los dos métodos, CGI y JavaScript, ha validado un formulario HTML para que la mayoría de las partes que se le envían sean precisas.

TAMBIÉN TE INTERESA

Instagram-Creator-Marketplace

España, a la espera del Instagram Creator Marketplace

Instagram es una de las redes sociales de mayor impacto en la población española. Desde su irrupción, la figura del influencer ha crecido enormemente en el mundo del marketing y las marcas. La herramienta Instagram Creator Marketplace puede seguir fortaleciendo a estos prescriptores, visto el potencial que empieza a tener este servicio en Estados Unidos.

avatares-Roblox

Vámonos de shopping en Roblox: Mango inaugura su primera tienda

En dinámico mundo de los juegos online, Roblox (con más de 70 millones de usuarios activos diarios) se ha destacado como una plataforma que ofrece a los participantes una experiencia única y diversa. Una de las características más populares de Roblox es su sistema de personalización de avatares, que permite a los jugadores expresar su

Snapdragon-8-Gen-3

Snapdragon 8 Gen 3, el chip de Qualcomm que empujará la IA en los móviles

La IA ha llegado al universo de los smartphones. Los últimos lanzamientos ya se anuncian con la inteligencia como protagonista. De igual manera, las grandes actualizaciones de software vienen marcada por la presencia de nuevas funciones movidas bajo los parámetros de la inteligencia artificial generativa. Al margen de los desarrollos a nivel de software, es

Ecowatch-1-de-Maxcom

Con el Ecowatch 1 no tendrás excusas para pasarte a un reloj inteligente

Sabemos que es muy difícil convencer a un perfil de personas que reniegan de un smartwatch a comprarse un reloj inteligente y quitarse el de toda la vida. No obstante, vamos a intentarlo con el Ecowatch 1 de Maxcom.  Es tarea complicada porque el gusto por los relojes suele estar muy definido en ciertas personas.

simulador-de-bodas

¿Te casas? La IA y DeWeed pueden ayudarte en la planificación de tu boda

La planificación de una boda es un proceso emocionante pero a menudo abrumador. Desde la selección del lugar perfecto hasta la elección del vestido ideal, hay innumerables decisiones que tomar para que todo salga según lo planeado en el gran día. Tradicionalmente, esta tarea ha supuesto muchos quebraderos de cabeza para los novios. Una vez