Enviar formulario usando JavaScript

Enviar un formulario HTML con JavaScript suele consistir en gestionar su evento submit, comprobar los valores introducidos y permitir que el navegador envíe los datos válidos a la action del formulario. El ejemplo siguiente crea un formulario, lee sus campos y usa validación del lado del cliente para detener los envíos incompletos. El servidor también debe validar los datos antes de utilizarlos.

Crear un formulario HTML

Asigna un name a cada control; ese nombre se convierte en su clave dentro de los datos enviados por el formulario. Usa una etiqueta para que cada campo tenga un nombre accesible. action indica la URL que recibe el formulario, mientras que method determina cómo envía el navegador los datos. Una solicitud POST envía los datos del formulario en el cuerpo de la solicitud; el servidor decide cómo procesarlos o almacenarlos.

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

Este marcado de una página del navegador es un ejemplo estático. Cuando el formulario es válido y el usuario activa el botón de envío, el navegador envía los controles con nombre a /signup.

Acceder al formulario

Selecciona el formulario por su ID con document.getElementById() o document.querySelector(). El siguiente código para el navegador presupone que el marcado anterior ya está en la página; usa la misma referencia form en el controlador de envío posterior.

const form = document.getElementById("signup-form");

El resultado es el elemento del formulario. Si el script se ejecuta antes de que se analice el formulario, colócalo después del formulario o espera a que el documento esté listo.

Obtener los valores de los campos del formulario en JavaScript

La colección elements de un formulario permite recuperar controles por su name. El texto actual de cada control está disponible mediante su propiedad singular .value. Para el formulario anterior, puedes leer el nombre y el correo electrónico así:

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

Los atributos name del HTML deben coincidir con las claves que se usan en form.elements. El método trim() elimina los espacios iniciales y finales antes de comprobar los valores.

Validar los datos de los campos del formulario en JavaScript

La función auxiliar siguiente comprueba si ambas cadenas de texto de los campos contienen algún carácter. Devuelve un valor booleano que un controlador de página puede usar junto con los valores leídos del formulario. El objeto de ejemplo proporciona un nombre y una dirección de correo electrónico, y el programa imprime el resultado para esos valores:

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

El navegador comprueba required y type="email" antes de enviar el evento submit del formulario. En esta etapa se rechaza un nombre vacío o un correo electrónico con formato incorrecto: el listener no se ejecuta, no se llama a preventDefault() y el navegador muestra su propio mensaje de validación. Un nombre compuesto solo por espacios supera required, por lo que el listener siguiente lo recibe; al aplicar trim(), queda una cadena vacía, la comprobación personalizada detiene el envío con preventDefault() y la página muestra su propio mensaje.

Para un controlador de página, añade un listener al formulario seleccionado y usa la misma comprobación con los valores actuales:

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

Cuando la comprobación da un resultado válido, el controlador deja que continúe el flujo normal de envío del formulario del navegador. Si falla, event.preventDefault() impide que el navegador envíe esos datos y el mensaje indica qué debe corregirse. El texto de los mensajes del ejemplo permanece en inglés. Esta validación del lado del cliente sirve para orientar al usuario, pero no es una barrera de seguridad: el endpoint sigue necesitando validación del lado del servidor, ya que se pueden enviar solicitudes sin usar esta página ni su JavaScript.

Si otro código necesita iniciar el envío, es preferible usar form.requestSubmit(): sigue el flujo normal de validación y del evento submit. En cambio, form.submit() envía el formulario directamente, sin ejecutar la validación de restricciones ni enviar el evento submit, por lo que un listener como este no se ejecutará.