Introducción a los Formularios Web

Los formularios son componentes esenciales en las aplicaciones web, ya que permiten a los usuarios enviar información al servidor. Se definen mediante la etiqueta <form> y, mediante distintos atributos, controlan cómo y dónde se envían los datos:

• action: URL a la que se envían los datos.
• method: Método HTTP para el envío (GET o POST):
  • GET: Los datos se anexan a la URL (menos seguro).
  • POST: Los datos se incluyen en el cuerpo de la petición.
• name: Asigna un nombre al formulario.
• target: Especifica dónde se muestra la respuesta (por ejemplo, en la misma ventana o en una nueva).
• acceptCharset: Define la codificación de caracteres (por ejemplo, "UTF-8").
• enctype: Especifica el tipo de contenido para el envío (relevante al subir archivos).
• length: Aunque no es un atributo HTML, en JavaScript la propiedad length del formulario indica el número de elementos que contiene.

Ejemplo básico:

<form id="miFormulario" action="/procesar" method="POST" name="formUsuario" target="_self" accept-charset="UTF-8" enctype="multipart/form-data">
  <!-- Campos del formulario -->
  <input type="submit" value="Enviar">
</form>

Acceso a Elementos de Formularios desde Código

Para manipular o validar formularios con JavaScript es fundamental poder acceder a cada uno de sus elementos. Existen varias técnicas:

• Por ID:

  const formulario = document.getElementById("miFormulario");

• Por etiqueta:

  const formularios = document.getElementsByTagName("form");

• A través de la colección document.forms:

  const formulario = document.forms["formUsuario"];

Una vez obtenido el formulario, la propiedad elements devuelve un array con todos sus componentes.

Tipos de Elementos Comunes y Cómo Acceder a su Valor

a) Campos de Texto

Se definen con <input type="text">, <input type="password"> o <input type="hidden"> y su contenido se obtiene mediante la propiedad value.

Ejemplo:

<input type="text" id="nombre" name="nombre" value="Juan" required>
<script>
  const nombreInput = document.getElementById("nombre");
  alert(nombreInput.value);
</script>

b) Radio Buttons

Se agrupan por tener el mismo atributo name. Se accede a ellos como un array; el que esté seleccionado tendrá checked === true.

Ejemplo:

<input type="radio" id="opcion1" name="genero" value="Masculino">
<label for="opcion1">Masculino</label>
<input type="radio" id="opcion2" name="genero" value="Femenino">
<label for="opcion2">Femenino</label>

<script>
  const radios = document.getElementsByName("genero");
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      console.log("Seleccionado: " + radios[i].value);
      break;
    }
  }
</script>

c) Checkboxes

Permiten seleccionar múltiples opciones. Se accede a ellos de forma similar a los radios, comprobando la propiedad checked.

Ejemplo:

<input type="checkbox" id="chk1" name="intereses" value="Música">
<label for="chk1">Música</label>
<input type="checkbox" id="chk2" name="intereses" value="Deportes">
<label for="chk2">Deportes</label>

<script>
  const checks = document.getElementsByName("intereses");
  for (let i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      console.log("Seleccionado: " + checks[i].value);
    }
  }
</script>

d) Select (Lista Desplegable)

El <select> agrupa opciones definidas mediante <option>. Se accede al valor de la opción seleccionada mediante selectedIndex y la colección options.

Ejemplo:

<select id="pais" name="pais">
  <option value="es">España</option>
  <option value="us">Estados Unidos</option>
  <option value="fr">Francia</option>
</select>

<script>
  const select = document.getElementById("pais");
  const indice = select.selectedIndex;
  const valor = select.options[indice].value;
  const texto = select.options[indice].text;
  console.log("Valor: " + valor + " - Texto: " + texto);
</script>

e) Textarea

Un campo de texto de varias líneas, cuyo contenido se obtiene mediante value.

Ejemplo:

<textarea id="comentarios" name="comentarios" rows="4" cols="50">Escribe aquí tus comentarios...</textarea>
<script>
  const area = document.getElementById("comentarios");
  console.log(area.value);
</script>

Uso de this en Manejadores

Cuando se asigna un manejador de eventos en línea o mediante código, la palabra clave this hace referencia al elemento sobre el cual se disparó el evento.

Ejemplo:

<input type="text" id="miTexto" name="miTexto" onclick="mostrarValor(this);">
<script>
  function mostrarValor(campo) {
    alert("El valor es: " + campo.value);
  }
</script>

Validación de Formularios

La validación asegura que la información ingresada sea correcta antes de enviarla al servidor. Se puede implementar tanto a nivel de HTML (usando atributos como required o pattern) como con JavaScript.

Validación con el Evento onsubmit

Puedes asignar una función al evento onsubmit del formulario. Si la función retorna false, se cancela el envío.

Ejemplo en HTML:

<form id="formulario" onsubmit="return validarFormulario();">
  <input type="text" id="usuario" name="usuario" placeholder="Ingrese su nombre" required>
  <input type="submit" value="Enviar">
</form>

Ejemplo de función de validación en JavaScript:

function validarFormulario() {
  const usuario = document.getElementById("usuario").value.trim();
  if (usuario === "") {
    alert("El campo usuario no puede estar vacío.");
    return false;
  }
  // Otras validaciones...
  return true;
}

También es común usar addEventListener para separar la lógica de la presentación:

document.getElementById("formulario").addEventListener("submit", function(event) {
  const usuario = document.getElementById("usuario").value.trim();
  if (usuario === "") {
    alert("El campo usuario es obligatorio.");
    event.preventDefault();
  } else {
    // Para evitar envíos múltiples, se deshabilita el botón:
    this.querySelector('[type=submit]').disabled = true;
  }
});

Ejemplos Comunes de Validación

• Campo Obligatorio:

  if (campo.value.trim() === "") {
    alert("El campo no puede estar vacío.");
    campo.classList.add("error");
    campo.focus();
    return false;
  }

• Campo Numérico:

  if (isNaN(campo.value)) {
    alert("El valor debe ser numérico.");
    return false;
  }

• Validación de Fecha:

  let fecha = new Date(año, mes - 1, dia); // Recuerda que los meses inician en 0
  if (isNaN(fecha.getTime())) {
    alert("Fecha inválida.");
    return false;
  }

• Checkbox Marcado:

  if (!document.getElementById("aceptar").checked) {
    alert("Debe aceptar las condiciones.");
    return false;
  }

Nota: Es recomendable definir una clase CSS (por ejemplo, .error { border-color: red; }) para marcar visualmente los campos con errores.

Validación con Expresiones Regulares

Las expresiones regulares permiten validar patrones complejos. Pueden aplicarse tanto mediante HTML5 usando el atributo pattern como mediante JavaScript.

Caracteres Especiales en Expresiones Regulares

Conocer estos caracteres es clave para construir patrones precisos:

• ^: Inicio de la cadena.
• $: Final de la cadena.
• *: 0 o más repeticiones del carácter anterior.
• +: 1 o más repeticiones del carácter anterior.
• ?: 0 o 1 ocurrencia del carácter anterior.
• .: Cualquier carácter (excepto salto de línea).
• x|y: Coincide con x o y.
• {n}: Exactamente n repeticiones del carácter anterior.
• {n,m}: Entre n y m repeticiones del carácter anterior.
• [abc]: Cualquier carácter de la lista.
• [^abc]: Cualquier carácter que no esté en la lista.
• \b: Límite de palabra.
• \B: Donde no hay límite de palabra.
• \d: Cualquier dígito (0-9).
• \D: Cualquier carácter no dígito.
• \f: Salto de página.
• \n: Salto de línea.
• \s: Espacio en blanco.
• \S: Carácter no blanco.
• \t: Tabulación.
• \w: Carácter alfanumérico (más guion bajo).
• \W: Carácter no alfanumérico.

Ejemplo práctico:

Validar una contraseña que tenga al menos 8 caracteres, incluyendo una mayúscula, una minúscula y un dígito:

const patronPassword = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
const password = "Secret123";
if (!patronPassword.test(password)) {
  alert("La contraseña no cumple con el formato requerido.");
} else {
  console.log("Contraseña válida");
}

Además, en HTML5 puedes usar:

<input type="password" id="password" name="password"
       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
       title="Debe contener al menos un número, una mayúscula y una minúscula, y tener 8 o más caracteres"
       required>

Bibliotecas de JavaScript para Validación

Para no reinventar la rueda, existen diversas bibliotecas que facilitan la validación:

• joi: (Mayormente en el entorno Node.js) Define esquemas de validación con gran flexibilidad.
  
• Validator.js: Ofrece muchas funciones de validación para emails, URLs, números, y más.
  
• Validate.js: Emplea un enfoque basado en restricciones para validar formularios y objetos en el cliente.
  
• jQuery Validation Plugin: Ideal para proyectos que ya utilizan jQuery, permite integrar validaciones de forma sencilla y con buena retroalimentación visual.

Estas herramientas permiten evitar la complejidad de escribir expresiones regulares manualmente y proporcionan una estructura para mensajes de error y reglas de validación.

Eventos Relacionados con Formularios

Los eventos son esenciales para interactuar en tiempo real y validar formularios conforme el usuario ingresa datos o realiza acciones. Se pueden registrar de distintas formas:

Modelos de Registro de Eventos

a) En Línea

Se asigna directamente en el HTML usando atributos como onclick o onsubmit.

<a href="#" onclick="accion(); return false;">Clic en línea</a>

Nota: Este método mezcla la estructura con la lógica y no es el más recomendable.

b) Tradicional

Se asigna el manejador como propiedad del elemento.

<button id="btnSubmit">Enviar</button>
<script>
  function accion() {
    alert("Botón pulsado");
  }
  document.getElementById("btnSubmit").onclick = accion;
</script>

c) Avanzado (W3C)

Utilizando addEventListener(), puedes asignar múltiples manejadores para el mismo evento y gestionar la fase de captura o burbujeo.

<button id="btnAvanzado">Haz clic</button>
<script>
  const btnAvanzado = document.getElementById("btnAvanzado");
  btnAvanzado.addEventListener("click", function() {
    alert("Manejador 1");
  });
  btnAvanzado.addEventListener("click", function() {
    alert("Manejador 2");
  });
</script>

Para eliminar un manejador, se utiliza removeEventListener() especificando la referencia exacta.

Consejo: Usa addEventListener() para separar la lógica JavaScript del HTML y aprovechar su flexibilidad.