Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto

Clase 18 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Cómo funcionan las validaciones de formularios con HTML?

La validación de formularios es esencial para asegurar que la información proporcionada por los usuarios sea completa y exacta. HTML proporciona validaciones básicas que pueden ser increíblemente útiles. Por ejemplo:

Usando type="email" en un input, HTML valida que el texto introducido tenga estructura de correo electrónico.
La propiedad required indica que un campo es obligatorio. Si no está lleno, el navegador automáticamente informa al usuario que necesita completarlo.

Sin embargo, las validaciones estándar de HTML son limitadas, ya que permiten cualquier entrada que cumpla con un mínimo de requisitos, como una sola letra o un número.

¿Cómo evitar el comportamiento por defecto del formulario?

Evitar el comportamiento por defecto de un formulario es crucial cuando deseas un control total sobre lo que ocurre después de que un usuario presiona enviar. Generalmente, los formularios intentan enviar datos a un servidor, refrescando la página y perdiendo cualquier información no guardada. Para evitar esto en JavaScript, podemos prevenir este comportamiento predeterminado.

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  // Tu lógica adicional aquí
});

Esta técnica permite a los desarrolladores manejar la lógica de envío con más flexibilidad, ofreciendo una experiencia de usuario más suave y evitando la pérdida de datos.

¿Cómo obtener y utilizar los valores de los inputs?

Una vez que el comportamiento por defecto está bajo control, el siguiente paso fundamental es manejar adecuadamente los datos de los inputs. Para obtener y utilizar estos datos, puedes seguir estos pasos:

Obteniendo valores de inputs:

Usa la propiedad elements del formulario para acceder a los elementos y obtener sus valores.

const form = document.getElementById('myForm');
const nameValue = form.elements['name'].value;
const emailValue = form.elements['email'].value;
console.log(nameValue, emailValue);

Acceso y manipulación de datos:

Con los datos capturados, puedes proceder a validaciones personalizadas o utilizarlos para enviarlos a un servidor utilizando AJAX o cualquier otra técnica de comunicación asíncrona.

Implementaciones como estas son vitales para mejorar la interacción del usuario con formularios en la web, garantizando que la información proporcionada sea precisa y útil. ¡Continúa experimentando y perfeccionando tus habilidades en JavaScript y DOM!

Pastor Alexander Castro Aguilar

student•

La clase de validación de formulario quedo incompleta

Diego Andrés Rojas Pinzón

student•

si es cierto, se supone que debe haber algun area encargada de que los videos esten completos y no cortados.

Platzi Team

student•

Sucede que no le pusieron .preventDefault() al video jajaja

Natalia Gallego Heras

student•

Esta clase trata del método .preventDefault( ), con el que vamos a evitar que 'submit' cumpla su misión por defecto: enviar los datos, los que sean.

Evitando los comportamientos por defecto, podemos ya sí programar cualquier elemento HTML a nuestro gusto.

Joaquin Pinto

student•

A este video le falta una parte como el estadio de Boca JAJAj

Santiago Perozo

student•

const name = form.elements["name"]
//tambien se puede usar...
const name = form["name"];

Eduardo Johnson A.

student•

era el paréntesis cuadrado

Orlando Alonso Gonzales Paz

student•

Este es el codigo de la clase segun github, lo comente por si alguien no lo logra entender.

// Seleccionamos el formulario con el ID "myForm"
const form = document.getElementById("myForm");

// Añadimos un listener para el evento 'submit' del formulario
form.addEventListener("submit", (event) => {
    // Prevenimos el comportamiento por defecto del formulario, que es recargar la página
    event.preventDefault();
    
    // Obtenemos el valor del campo de texto "name" del formulario
    const name = form.elements["name"].value;
    console.log(name); // Imprimimos el nombre en la consola para verificar

    // Validamos que el nombre tenga al menos 3 letras
    if (name.length < 3) {
        alert("El nombre necesita más de 3 letras"); // Mostramos alerta si no cumple
        return; // Salimos de la función si la validación falla
    }

    // Obtenemos el valor del campo de texto "email" del formulario
    const email = form.elements["email"].value;
    console.log(email); // Imprimimos el email en la consola para verificar

    // Validamos que el email contenga un símbolo "@" para asegurarnos de que es válido
    if (!email.includes("@")) {
        alert("Please enter a valid email address"); // Mostramos alerta si el email no es válido
        return; // Salimos de la función si la validación falla
    }

    // Si todo está correcto, mostramos un mensaje de éxito
    alert("Formulario enviado exitosamente!");

    // Mostramos los valores de "name" y "email" en la consola
    console.log(`El nombre del usuario es: ${name} y su correo es: ${email}`);

    // Creamos un objeto con los datos del formulario
    const formData = {
        name: name, // Asignamos el valor de "name" al objeto
        email: email, // Asignamos el valor de "email" al objeto
    };

    // Imprimimos el objeto con los datos en la consola
    console.log(formData);
});

Carlos Andres Arteaga escobar

student•

es muy interesante estos eventos pero siento que me toca hacer mas proyecto para aprender cada una mas y mas <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <main> <form id="myform"> <label for="Name">nombre</label> <input type="text" id="Name" name="Name" required>

<label for="Coreo">Coreo</label> <input type="email" id="Coreo" name="Coreo" required> <button type="submit">submit</button> </form> </main> <script src="formulario.js"></script></body></html>

const myform = document.getElementById("myform"); myform.addEventListener("submit", (evento) => { evento.preventDefault(); const name = myform.elements["Name"].value; const email = myform.elements["Coreo"].value; console.log("Nombre:", name); console.log("Correo:", email);});

Cesar Arellano Hernández

student•

clase19.preventDefault();

Octavio Elsacte Palma

student•

me da la impresión de que el curso anterior de manipulación del DOM estaba más completo, más diverso

Markin Piero Pulache Guarniz

student•

el elements me da error

Santiago Perozo

student•

a mi me paso lo mismo

Calvin Rafael Bobadilla Fernandez

student•

seguramente sea porque en vez de corchetes usaron parentesis. Me paso igual pero le puse corchetes y funcione, si queres chequea si es eso. (Es tarde igual seguramente lo arreglaste pero porsiacaso xd)

Kristhian Lizcano

student•

const form = document.getElementById("myForm");
const errors = document.getElementById("errors");

form.addEventListener("submit", event => {
  event.preventDefault();
  errors.textContent = "";

  const name = form.elements["name"].value.trim();
  const email = form.elements["email"].value.trim();

  let messages = [];

  if (name.length < 3) {
    messages.push("El nombre debe tener mínimo 3 caracteres.");
  }

  if (!email.includes("@") || !email.includes(".")) {
    messages.push("El correo no es válido.");
  }

  if (messages.length > 0) {
    errors.textContent = messages.join(" ");
  } else {
    console.log("Datos correctos");
    console.log({ name, email });
    form.reset();
  }
});

Moises Hernandez

student•

Hice el código con un callback como mencionaba en la clase pasada.

const form = document.getElementById("myForm");

// función para tomar la info del formulario
const handleForm = (e) => {
   e.preventDefault();
   const name = e.target.elements["name"].value;
   const email = e.target.elements["email"].value;
   const user = {
      name: name,
      email: email
   }
   console.log(user);
}


form.addEventListener("submit", (e) => handleForm(e));

Any Omaña

student•

Holis! Hasta acá el código de la clase, estaba súper interesada en esta parte y se cortó de repente 😥

//Acceso al formulario
const form = document.getElementById("myForm");

//Función que se activa al momento que se termine de llenar el formulario
form.addEventListener("submit", (event) => {
    //Evitar que se refresque la página al presionar el botón de submit
    event.preventDefault();
    //Encontrar dentro del form un elemento con ese atributo llamado "name"
    //Con el value me trae el valor con el que se llenó ese campo del formulario
    const name = form.elements["name"].value;
    console.log(name);
})
```Ojalá lo corrijan prontito :)

Any Omaña

student•

Aquí se les dejo un poco más completo, fui al repositorio de esta clase y le agregué comentarios acerca de qué hace cada cosa:

//Acceso al formulario
const form = document.getElementById("myForm");

//Función que se activa al momento que se termine de llenar el formulario
form.addEventListener("submit", (event) => {
    //Evitar que se refresque la página al presionar el botón de submit
    event.preventDefault();
    //Encontrar dentro del form un elemento con ese atributo llamado "name"
    //Con el value me trae el valor con el que se llenó ese campo del formulario
    const name = form.elements["name"].value;
    console.log(name);

    //Este condicional valida que el nombre tenga más de 3 letras
    if (name.length < 3) {
    alert("El nombre necesita más de 3 letras");
    return;
  }

  //Valida que el correo esté completo
  const email = form.elements["email"].value;
  console.log(email);
  if (!email.includes("@")) {
    alert("Please enter a valid email address");
    return;
  }

  //Alerta de que el envío de formulario funcionó
   alert("Formulario enviado exitosamente!");

   console.log(`El nombre del usuario es: ${name} y su correo es: ${email}`);

  //Objeto con los datos del formulario
  const formData = {
    name: name,
    email: email,
  };

  //Llamado del objeto
  console.log(formData);
});

Ysabella Navas

student•

Quise agregar un poco más, espero les sea útil:

//Validacion de formularios

const button = document.querySelector("button");
const form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
    
    event.preventDefault(); // Evita el envío del formulario

    const name = form.elements["name"];
    const email = form.elements["email"];

    //Alerta al usuario
    alert(`Hola ${name.value} tu formulario ha sido enviado correctamente y enviamos una confirmación a ${email.value}`);

    //Esconde el form y despliega un mensaje
    form.style.display = "none"; // Oculta el formulario
    form.insertAdjacentHTML("afterend", "<p>Gracias por enviar el formulario</p>"); // Muestra un mensaje de agradecimiento
});

Kyb3r Cipher

student•

Siento que estas classes de formularios estan incompletas

Calvin Rafael Bobadilla Fernandez

student•

Codigo hasta ahora: (El video esta modo infinity war pero me imagino que el siguiente es la otra parte)

const form = document.getElementById('myForm')

form.addEventListener('submit', (event) => {
    event.preventDefault()
    const name = form.elements['name']
    const email = form.elements['email']
    console.log(name)
    console.log(email)
})

Jesus Anguiano Solano

student•

Los formularios en HTML, por defecto, intentan enviar los datos al servidor cuando se hace clic en el botón de envío (submit). Este comportamiento puede evitarse usando event.preventDefault(), lo que permite manejar la validación y el procesamiento del formulario mediante JavaScript

Carlos Miguel Garcia Hernández

student•

const form = document.getElementById("myForm")
const botton = document.querySelector("button")

botton.addEventListener("click", (event) =>
{
    event.preventDefault()
    console.log(form[0].value)
    console.log(form[1].value)
})
```const form = document.getElementById("myForm")const botton = document.querySelector("button")
botton.addEventListener("click", (event) =>{    event.preventDefault()    console.log(form\[0].value)    console.log(form\[1].value)})

Carlos Miguel Garcia Hernández

student•

Esta bien de esa forma ? los leo..