Formas y manejo de entradas

Manejar la entrada del usuario a través de formularios es un aspecto crucial del desarrollo web. JavaScript proporciona métodos para interactuar con los elementos del formulario, validar la entrada del usuario y responder a las envíos de formularios de manera dinámica.

Accediendo a Elementos de Formulario

JavaScript puede seleccionar elementos de formulario usando document.forms, getElementById(), o querySelector().

let form = document.getElementById("myForm");
let username = document.querySelector("#username");
let email = document.forms["myForm"]["email"];

Obteniendo y Estableciendo Valores de Entrada

Para obtener la entrada del usuario:

let usernameValue = document.getElementById("username").value;
console.log(usernameValue);

Para establecer un valor de entrada dinámicamente:

document.getElementById("username").value = "DefaultUser";

Manejando el Envío de Formularios

El evento submit se activa cuando un formulario es enviado. Usa event.preventDefault() para prevenir la recarga de la página.

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault();
  console.log("Form submitted!");
});

Ejemplo de recolección de datos del formulario:

document.getElementById("myForm").addEventListener("submit", event => {
  event.preventDefault();
    
  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;
  
  console.log(`Username: ${username}, Email: ${email}`);
});

Validación de Formularios

La validación de campos de entrada asegura la corrección de los datos antes del envío.

Validación Básica Usando JavaScript

document.getElementById("myForm").addEventListener("submit", event => {
  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;
    
  if (username === "" || email === "") {
    event.preventDefault();
    alert("All fields are required!");
  }
});

Validando la Longitud de la Entrada

if (username.length < 3) {
  alert("Username must be at least 3 characters long.");
}

Validando el Formato de Correo Electrónico

Usa expresiones regulares para comprobar si un correo electrónico es válido.

let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
  alert("Enter a valid email address.");
}

Mostrando Mensajes de Validación

En lugar de alert(), los mensajes de error pueden ser mostrados cerca del campo de entrada.

document.getElementById("myForm").addEventListener("submit", event => {
  let username = document.getElementById("username").value;
  let errorDiv = document.getElementById("error-message");

  if (username.length < 3) {
    event.preventDefault();
    errorDiv.textContent = "Username must be at least 3 characters long.";
  } else {
    errorDiv.textContent = "";
  }
});

<input type="text" id="username">
<div id="error-message" style="color: red;"></div>

Manejando Eventos de Entrada en Tiempo Real

JavaScript puede validar entradas a medida que los usuarios escriben usando el evento input o keyup.

document.getElementById("username").addEventListener("input", event => {
  let value = event.target.value;
  document.getElementById("live-output").textContent = value;
});

<input type="text" id="username">
<p>Live Output: <span id="live-output"></span></p>

Trabajando con Casillas de Verificación y Botones de Opción

Manejando Casillas de Verificación

document.getElementById("subscribe").addEventListener("change", event => {
  console.log(event.target.checked ? "Subscribed" : "Unsubscribed");
});

<input type="checkbox" id="subscribe">

Manejando Botones de Opción

document.querySelectorAll('input[name="gender"]').forEach(radio => {
  radio.addEventListener("change", event => {
    console.log("Selected gender:", event.target.value);
  });
});

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female">

Usando el Elemento `select`

JavaScript puede detectar cambios en listas desplegables y recuperar valores seleccionados.

document.getElementById("country").addEventListener("change", event => {
  console.log("Selected country:", event.target.value);
});

<select id="country">
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="Canada">Canada</option>
</select>

Autocompletando Datos del Formulario

Usando JavaScript, los formularios pueden ser autocompletados dinámicamente.

document.getElementById("autoFill").addEventListener("click", () => {
  document.getElementById("username").value = "JohnDoe";
  document.getElementById("email").value = "john@example.com";
});

<button id="autoFill">Auto-Fill Form</button>

Conclusión

JavaScript permite el manejo dinámico de la entrada del usuario a través de formularios, validaciones y oyentes de eventos. La siguiente sección se centrará en APIs Web, incluyendo almacenamiento local, geolocalización y Fetch API, para interactuar con las capacidades del navegador.

Manejo de Eventos

API web

Únete a nuestro Foro Comunitario

¿Alguna otra pregunta? Ponte en contacto