JavaScript es un lenguaje de programación fundamental para el desarrollo web por sus amplios métodos y objetos nativos, que nos permiten interactuar con los elementos HTML de un proyecto. En este post, te enseñaremos qué es y cómo funciona el objeto FormData en JavaScript, fundamental para interactuar con los datos de un formulario.
¿Qué es FormData en JavaScript?
FormData en JavaScript es una clase nativa de este lenguaje de programación que nos permite realizar validaciones de formularios y traer datos de estos componentes. En este sentido, funciona como una especie de controlador de formulario.
Para ayudarnos a controlar el comportamiento y los datos de un formulario, la clase FormData en JavaScript recibe el nodo HTML, que contiene este componente form. Sobre este nodo, la clase nos permite ejecutar diversos métodos.
Existen otros métodos para interactuar con el comportamiento y datos de un formulario. Estos se ejecutan directamente sobre el nodo de form. Si quieres conocer más sobre ellos, te recomendamos el artículo sobre validar formularios utilizando JavaScript de Mozilla Developer Network. Este artículo es una gran herramienta cuando nos estamos peleando con validaciones de formulario en vanilla JavaScript.
¿Cómo funciona FormData en JavaScript?
Como te comentábamos antes, la clase FormData en JavaScript nos permite ejecutar diversas acciones sobre un form. A continuación, te enseñaremos cómo utilizar esta clase para traer datos de un formulario.
Para utilizar esta clase nativa, lo primero que haremos será declarar una nueva instancia y guardarla en una variable de tipo const. Dentro de esta instancia, pasaremos el nodo HTML de nuestro formulario, que en nuestro caso está guardado dentro de la variable formElement:
// form-data js
const formData = new FormData (this.formElement)Si tienes dudas sobre la idea de nueva instancia, te recomendamos leer nuestro post sobre clases e instancias en JavaScript.
Ahora que hemos guardado esta nueva instancia en una variable, podemos usar el nombre de esta variable para ejecutar un método get y traer un dato específico del elemento form que hemos pasado.
Entonces, suponiendo que queremos traer datos de un input con la propiedad name y el valor “textInput”, podemos ejecutar el método get de la clase js formdata sobre este input, seleccionado con su name. A continuación, te mostramos cómo ejecutamos esta acción y la guardamos bajo la constante llamada username:
const username = formData.get (‘textInput’)
Ahora, si lo que tenemos es un formulario como el de nuestro post sobre crear un formulario de registro en HTML, que tiene tres inputs (uno de usuario, uno de contraseña y otro de contraseña repetida), podríamos replicar la anterior línea de código y crear constantes para acceder a los datos de cada input.
A continuación, te mostramos cómo usaríamos el objeto FormData en JavaScript para acceder a los datos de distintos inputs:
const username = formData.get (‘textInput’);
const passwordInput = formData.get (‘passwordInput’);
const passwordMatchInput = formData.get (‘passwordMatchInput’);
Si quieres testar el funcionamiento de las anteriores líneas de código, te invitamos a insertar una línea de código debugger después de ellas para revisarlo desde el inspector de tu navegador. Esto te permitirá definir un punto de parada en este código para revisarlo. Una vez hecho esto, podrás pasar tu cursor sobre las constantes que has declarado y ver el mensaje de su contenido.
Bajo el contexto de este post, utilizar un objeto javascript form data puede ser útil para muchos ejercicios. Uno de ellos sería acceder al contenido dentro de un input de contraseña para, de ese modo, validarlo. En nuestro post sobre las 6 acciones a ejecutar sobre un formulario de registro, te hemos mencionado que puedes definir parámetros de caracteres en tus inputs o validar contraseñas repetidas. Para ambas acciones necesitarás revisar el contenido de los inputs, algo facilísimo de hacer con este objeto FormData en JavaScript.
¿Quieres seguir aprendiendo?
Al leer este post, has aprendido exactamente qué es y cómo funciona el objeto FormData en JavaScript. Sin embargo, ¡todavía queda mucho por aprender sobre este poderoso lenguaje! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás en profundidad sobre JavaScript, HTML, CSS y mucho más. ¿Quieres seguir aprendiendo con nosotros para convertirte en un profesional y destacar en el mercado laboral IT? ¡Pide más información ahora y descubre cómo puedes cambiar tu vida en pocos meses!
