No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Manejo de entradas de formulario y validación

18/27
Recursos

Aportes 12

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

La clase de validación de formulario quedo incompleta
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.
```js const name = form.elements["name"] //tambien se puede usar... const name = form["name"]; ```
A este video le falta una parte como el estadio de Boca JAJAj
me da la impresión de que el curso anterior de manipulación del DOM estaba más completo, más diverso
es muy interesante estos eventos pero siento que me toca hacer mas proyecto para aprender cada una mas y mas \\<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);});
el elements me da error
Siento que estas classes de formularios estan incompletas
Este es el codigo de la clase segun github, lo comente por si alguien no lo logra entender. ```js // 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); }); ```
Codigo hasta ahora: (El video esta modo infinity war pero me imagino que el siguiente es la otra parte) ```js 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) }) ```
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
```js 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)})