Enviar formulario usando JavaScript

1. Crear formulario HTML
2. Accede al formulario
3. Obtener valores de campos de formulario en JavaScript
4. Validar datos de campos de formulario en JavaScript

Este tutorial presentará cómo enviar un formulario usando JavaScript.

Los formularios ayudan a tomar datos de los usuarios y almacenarlos en una base de datos estructurada. El envío de formularios es un evento clave cuando trabajamos con varias aplicaciones y sitios web. No es tan simple como llamar a form.submit() o hacer clic en el botón enviar. Cuando se envía el formulario, el evento de envío se activa justo antes de que se envíe la solicitud al servidor. Aquí es donde JavaScript entrará en acción y validará los datos ingresados. Incluso podemos crear objetos y agregar varios atributos.

Entonces, para hacer un envío de formulario, primero tenemos que crear un formulario, acceder al formulario, obtener valores de varios campos, validar todos los valores y luego hacer clic en el botón de envío/llamar for.submit().

Crear formulario HTML

Podemos crear un formulario HTML usando el elemento <form>.

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

El formulario anterior tiene dos atributos: action y method.

1. action: Especifica la URL que manejará el proceso de envío del formulario.
2. method: Especifica el método HTTP utilizado para enviar el formulario. El método post ayuda a almacenar datos en una base de datos enviando los datos al servidor en el cuerpo de la solicitud. El método get agrega los datos del formulario a una URL que tiene ?.

Accede al formulario

Podemos acceder a los elementos del formulario utilizando cualquiera de los selectores de JavaScript como getElementByTag, getElementById, etc.

let form = document.getElementById('signup-form');

Obtener valores de campos de formulario en JavaScript

Podemos acceder a los campos de entrada en el formulario utilizando el array de elementos del formulario o haciendo referencia a la identificación del campo. Después de haber accedido al campo, podemos usar el atributo .values para obtener los valores almacenados dentro de ese campo. Una vez que hayamos adquirido los datos del formulario, podemos validar los datos antes de proceder con el envío final del formulario.

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

Validar datos de campos de formulario en JavaScript

Agregamos un detector de eventos al botón de envío y llamamos a nuestro procedimiento de validación antes de pasar a la página siguiente. Por ejemplo: para una página de registro, el usuario debe proporcionar tanto el correo electrónico como la contraseña.

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

En el código anterior, hemos escrito una pequeña verificación de validación para ver si el campo de entrada está vacío. Luego, hemos adjuntado un detector de eventos al botón de envío para procesar primero los datos antes de pasarlos a la URL de la acción. Nos aseguramos de que el campo de entrada no esté vacío y, en caso de que lo esté, evitamos el envío del formulario llamando a event.preventDefault(). De esta manera, JavaScript y HTML manejan el envío completo del formulario.