Web 1 - Formularios con Javascript

Summary

La clase de programación en español discute cómo trabajar de manera eficiente con formularios utilizando JavaScript. Se aborda el problema de la recarga de página al enviar un formulario y se presentan varias soluciones, incluyendo la modificación del atributo 'type' de un botón o la utilización de eventos para evitar el envío de datos al servidor. Se destaca la importancia de mantener las validaciones HTML para mejorar la experiencia del usuario y se introduce el uso de FormData de JavaScript para manejar de forma más eficiente y prolija los datos de los formularios. Además, se menciona la posibilidad de aprovechar las validaciones en el lado del cliente para mejorar la usabilidad y se invita a los estudiantes a explorar más a fondo en futuras clases.

Takeaways

• 📝 Los formularios son una herramienta de HTML para capturar información del usuario, procesarla y enviarla a un servidor.
• 🔄 El problema común con los formularios es que al enviarlos, la página se recarga, lo que impide el uso de JavaScript.
• 🛑 Para evitar el reinicio de la página, se puede cambiar el 'type' del botón a 'button' o usar 'event.preventDefault()'.
• 🔩 Es importante incluir todos los 'input' y 'button' dentro del mismo formulario en HTML para un manejo adecuado.
• 📱 Utilizar 'FormData' de JavaScript permite obtener todos los datos del formulario de manera más eficiente y sin necesidad de manejar cada 'input' por separado.
• 📧 Los atributos 'name' en los 'input' son cruciales ya que representan las claves del objeto 'FormData' y son cómo el servidor identifica los datos enviados.
• ✅ Las validaciones HTML nativas, como 'required', 'type="email"', etc., son útiles y deberían ser utilizadas para mejorar la experiencia del usuario y la usabilidad.
• 🚫 Al evitar el envío del formulario de manera tradicional, se pierden las validaciones HTML incorporadas, por lo que se deben replicar en JavaScript si es necesario.
• 🔄 En lugar de escuchar el evento 'click' en el botón, se puede escuchar el evento 'submit' del formulario para tener mayor control sobre el proceso de envío.
• 📈 Usar atributos HTML para la validación mejora la experiencia del usuario y reduce la cantidad de código JavaScript necesario para validaciones básicas.
• 💡 Para un mejor manejo de formularios, se recomienda utilizar las validaciones HTML y luego complementarlas con JavaScript si es necesario para obtener un comportamiento personalizado.

Q & A

¿Qué es lo que se busca hacer cuando se trabaja con formularios en JavaScript?

Se busca capturar la información introducida por los usuarios en la página o aplicación y procesarla con JavaScript, a menudo sin necesidad de enviarla a un servidor.

¿Cuál es el problema que muchos encuentran al trabajar con formularios?

El problema común es que al enviar el formulario, la página se recarga porque el navegador intenta enviarlo a un servidor por defecto, lo que impide el uso de JavaScript para procesar la información.

¿Cómo se puede evitar que el navegador envíe el formulario a un servidor y permita el procesamiento con JavaScript?

Se puede cambiar el tipo del botón a `button`, agregar un evento `event` que prevenga el comportamiento por defecto del envío del formulario, o sacar el botón fuera del formulario.

¿Por qué es importante mantener los atributos `name` en los inputs de un formulario?

Los atributos `name` son importantes porque son las claves que el servidor buscará cuando reciba el formulario. Además, son útiles para acceder a los valores de los inputs con JavaScript.

¿Cómo se puede mejorar la eficiencia al leer los valores de múltiples inputs en un formulario?

Se puede usar la API `FormData` de JavaScript para construir un conjunto de datos que representan todos los campos del formulario, lo que permite acceder a los valores de manera más eficiente.

¿Qué ventaja tiene utilizar `FormData` para manejar los datos del formulario?

Al usar `FormData`, se puede obtener un objeto que contiene todos los campos del formulario, lo que reduce la cantidad de código necesario para leer los inputs individualmente.

¿Cómo se pueden aplicar validaciones en el lado del cliente utilizando HTML?

Las validaciones en el lado del cliente se pueden aplicar utilizando atributos HTML como `required`, `minlength`, `maxlength`, y tipos de entrada específicos como `email`, que el navegador verificará antes de enviar el formulario.

¿Por qué es importante realizar validaciones en el lado del cliente?

Las validaciones en el lado del cliente mejoran la usabilidad al informar al usuario de manera inmediata si ha ingresado los datos de manera incorrecta, aunque no son tan críticas para la seguridad, ya que cualquier validación importante también debe ser hecha en el lado del servidor.

¿Cómo se puede acceder al valor de un input utilizando `FormData`?

Se puede acceder al valor de un input utilizando el método `get` en el objeto `FormData`, proporcionando como argumento el `name` del input.

¿Qué sucede si se olvida asignar el atributo `name` a un input y se utiliza `FormData` para acceder a su valor?

Si se olvida asignar el atributo `name` a un input, al intentar acceder a su valor con `FormData.get`, se obtendrá `null` o el valor vacío porque la clave no está definida en el objeto `FormData`.

¿Cómo se puede mejorar la experiencia del usuario y asegurar que se utilicen las validaciones HTML?

Se puede mejorar la experiencia del usuario y asegurar el uso de validaciones HTML escuchando el evento de envío del formulario en lugar del clic del botón y utilizando `event.preventDefault()` para evitar el envío del formulario antes de que se realicen las validaciones y el procesamiento con JavaScript.

Outlines

00:00

😀 Introducción a formularios con JavaScript

El primer párrafo introduce la clase y el tema de la lección, que es trabajar con formularios utilizando JavaScript. Se menciona que ya se había trabajado con formularios en la materia y que hoy se aborda una forma quizás más avanzada de trabajar con la información ingresada por los usuarios. Se destaca el problema de los formularios HTML, que por defecto envían la información al servidor, lo que recarga la página y evita el uso de JavaScript. Se presentan diferentes soluciones para evitar este comportamiento, como cambiar el tipo de botón o agregar un evento listener para prevenir el envío del formulario.

05:02

🔍 Manejo de eventos y validaciones HTML

Este párrafo profundiza en cómo se pueden manejar los eventos de envío de formularios y cómo se pueden aplicar validaciones HTML. Se discute la pérdida de validaciones incorporadas al manipular el envío del formulario con JavaScript y se sugiere la utilización del evento submit del formulario en lugar del clic del botón para mantener dichas validaciones. Se destaca la importancia de las validaciones en la experiencia del usuario y cómo se pueden combinar con las soluciones JavaScript para mejorar la interacción con los formularios.

10:03

📝 Uso de FormData para simplificar la obtención de datos de formularios

El tercer párrafo se enfoca en el uso de FormData de JavaScript como una forma más eficiente y prolija de obtener los datos de un formulario. Se explica cómo se puede utilizar FormData para crear un conjunto de datos que representan todos los campos del formulario, lo que permite acceder a ellos de manera más sencilla y con menos código. Se demuestra cómo se puede obtener el valor de cada campo utilizando la clave (nombre) del input y se destaca la importancia de asignar nombres adecuados a los inputs para su posterior manipulación.

15:04

🌐 Explorando validaciones y atributos HTML5

El último párrafo aborda las validaciones de formularios que se pueden realizar del lado del cliente utilizando atributos HTML5. Se menciona que estas validaciones son importantes para la usabilidad y la experiencia del usuario, aunque no son tan críticas para la seguridad. Se presentan ejemplos de atributos como 'required' y restricciones de longitud para los campos de contraseña. Se invita a los estudiantes a explorar más a fondo estas validaciones en el futuro y se cierra el video con una recomendación de seguir utilizando esta técnica para trabajar con formularios y JavaScript.

Keywords

💡formularios

Los formularios en HTML son herramientas para capturar y enviar información del usuario a un servidor. En el video, se discute cómo manejar los formularios con JavaScript para mejorar la interacción y evitar el envío automático de datos que causa la recarga de la página. Se menciona el uso de eventos como 'submit' y técnicas para prevenir el comportamiento predeterminado del formulario.

💡JavaScript

JavaScript es un lenguaje de programación utilizado principalmente en el desarrollo web para agregar interactividad a las páginas. En el contexto del video, se utiliza JavaScript para manipular el comportamiento de los formularios, como interceptar el evento de envío y manejar los datos introducidos por el usuario sin recargar la página.

💡preventDefault

El método 'preventDefault' es utilizado en JavaScript para detener la acción predeterminada de un elemento en un evento. Este método es clave en el video para detener el envío automático de formularios, permitiendo que se procesen los datos de forma manual con JavaScript y así mantener la página estática sin recargar.

💡evento submit

El evento 'submit' se desencadena en un formulario cuando el usuario intenta enviarlo. En el video, se recomienda escuchar este evento en lugar del clic en un botón, para aprovechar las validaciones HTML antes de que JavaScript tome el control y procese los datos, garantizando que solo se envíe el formulario si todos los campos son válidos.

💡validaciones HTML

Las validaciones HTML son mecanismos que permiten verificar que los datos ingresados en un formulario cumplen ciertos criterios antes de ser enviados. En el video, se menciona cómo estas validaciones pueden prevenir problemas comunes de entrada de datos y cómo el uso adecuado de JavaScript puede complementar estas validaciones para mejorar la experiencia de usuario.

💡FormData

FormData es una interfaz de JavaScript que permite compilar y enviar datos de forma programática desde un formulario. En el video, se explica cómo utilizar FormData para manejar los datos del formulario de manera más eficiente, evitando la necesidad de seleccionar manualmente cada campo y su valor.

💡input

En el contexto de formularios HTML, un 'input' es un campo donde los usuarios pueden introducir datos. El video discute diferentes tipos de 'input' como texto, email y contraseña, y cómo se pueden utilizar con JavaScript y HTML para recoger y validar información de forma segura y eficiente.

💡atributo name

El atributo 'name' en los elementos de un formulario HTML identifica cada campo de entrada de datos. En el video, se destaca su importancia, ya que estos nombres son utilizados para acceder a los datos en JavaScript mediante objetos FormData, y son cruciales cuando se envían datos al servidor.

💡navegador

El navegador es el programa utilizado para acceder a Internet y visualizar páginas web. En el video, se discute cómo los navegadores manejan por defecto el envío de formularios y cómo JavaScript puede ser usado para alterar este comportamiento y controlar el procesamiento de los datos de forma manual.

💡backend

Backend se refiere a la parte del desarrollo web que se encarga de la lógica de negocio y el procesamiento de datos del lado del servidor. Aunque el video se centra en la manipulación del lado cliente con JavaScript, se menciona el backend en el contexto de recibir y procesar los datos enviados desde los formularios.

Highlights

Hoy vamos a hablar de formularios con JavaScript, una forma quizás superadora de trabajar con la información de los usuarios.

Los formularios son mecanismos de HTML para capturar, procesar y enviar información a un servidor.

Problemas comunes al trabajar con formularios incluyen la recarga de la página y la limitación de JavaScript.

Se discuten diferentes formas de evitar que el navegador envíe el formulario a un servidor por defecto.

Se sugiere cambiar el `type` del botón a `button` para evitar el envío del formulario.

Se puede agregar un evento `event` al botón que previene el envío del formulario y permite controlar el proceso con JavaScript.

Otra solución es sacar el botón fuera del formulario para que no se envíe con él.

Se pierden las validaciones HTML cuando se manipula el envío del formulario con JavaScript.

Se debe ser prolijo con las claves `name` de los inputs, ya que son fundamentales para la validación y el envío del formulario.

Se introduce el uso de FormData de JavaScript para obtener todos los datos del formulario de manera más eficiente.

Se muestra cómo utilizar `FormData` para acceder a los valores de los campos del formulario sin necesidad de manipular el DOM.

Se destaca la importancia de utilizar las validaciones HTML nativas para mejorar la experiencia del usuario y la usabilidad.

Se menciona la posibilidad de utilizar atributos HTML para requerir campos y validar el formato de entradas como contraseñas.

Se enfatiza la importancia de hacer validaciones del lado del cliente no solo por usabilidad sino también por seguridad.

Se sugiere profundizar en las validaciones de formularios en el lado del cliente en cursos avanzados de desarrollo web.

Se recomienda escuchar el evento de envío del formulario en lugar del clic del botón para tener más control y utilizar las validaciones HTML.

Se habla sobre cómo evitar la recarga de página y trabajar mejor con formularios en JavaScript.

Se invita a los desarrolladores a practicar y aplicar estos conceptos en sus trabajos para mejorar la interacción con los formularios.

Transcripts

buenas buenas bienvenidos bienvenidas a

una clase de 9-1 hoy vamos a hablar de

formularios con javascript ya veníamos

trabajando con formularios en la materia

todos resolvieron problemas usando

formularios pero hoy vamos hablar de una

forma un poco quizás superadora o mejor

de trabajar con la información que

introducen los usuarios en nuestra

página nuestra aplicación y justamente

ese es el

[Música]

la idea los formularios cuando nos

presentamos a ella por el inicio de la

materia dijimos que los formularios eran

mecanismos que tenía html para capturar

la información del usuario procesarla y

enviarla a algún servidor sí para que

haga algo con eso de laguardia lo que

sea eso son cuestiones que veremos un

poco más adelante pero nosotros al menos

acá nos importaba obtener esa

información para hacer algo si a veces

ni siquiera enviamos a un servidor no

obtenemos para generar algo en

javascript

bien el problema es que muchos se

toparon cuando empezaron a trabajar con

formularios era que cuando escribían

sigue un usuario escribía y apretar el

botón de enviar o the sun mitch quieren

que nosotros identificamos para llevar

adelante la acción que necesitábamos

pasaba que la página se refrescaba así y

no podíamos trabajar con javascript

porque la página comenzaba de nuevo

obviamente

qué pasaba todos los fuimos resolviendo

pero empañan lo que estaba pasando era

bueno que el browser el navegador

intentaba enviar ese formulario un

servidor porque es el comportamiento por

defecto que tienen esos formularios

entonces la página se recargaba no lo

enviaba nadie no porque no estábamos

haciendo toda esa parte de back-end si

se quiere pero era lo que inicialmente

intentaba hacer

nuestro navegador

y lo fuimos solucionando de diferentes

formas que yo traje ya un ejemplo ahora

bien este es el ejemplo que me traje yo

es un formulario muy sencillo tres

inputs es cuando emprendemos registrar y

ejecutar algo javascript

con una bendición el obvio no importa

que yo voy a hacer un simple con solo

cada uno adaptar a su contexto porque lo

que nos importa es cómo se trata ese

formulario importante cuando hablamos de

formularios en html meter todos los

input y todos los botones dentro del

mismo si nada sacamos afuera nada de no

usar formularios sino que lo correcto es

usar un formulario que contenga todo

obviamente yo tengo una belice en este

botón que está acá y cuando lo explique

o llamamos la función agregar

qué nos pasa con esto en el haber pasado

a todos es que cuando yo presto

registrar se ejecuta la función porque

si llegan a ver acá aparece el conson

log pero la página se refresca y mirar

acá arriba a la izquierda para ver que

la página se refresca muy rápido o yo

estoy local

pero lo que intenta hacer browser es

mandar ese formulario a algún servidor

que es el comportamiento por default que

viene

esta seguramente le pasó a todos los que

usaron formularios entonces formas de

resolverlo aparecieron varias cada uno

investigado pregunto y lo fuimos

resolviendo había una que era cambiarle

el type al botón porque por defecto el

tipo de los botones son del tipo sad mit

que se envía decíamos poner de tipo

button y listo

también era una buena

aprieto registra y llaman la función

punto otra que apareció era no cambiará

el tipo no que el botón sea el botón de

enviarles lo que tiene que ser pero acá

la función agregarle el parámetro y del

evento que le manda level listener hemos

hablado en otras clases de esto

mandárselo como parámetro y acá usar ese

evento que llega como parámetro para

decirle bueno no haga lo que iba a ser

lo que iba a hacer era enviar el

formulario decirles no para no haga lo

que ibas a hacer con un prever default y

qué punto prevén default

se usaron muchos hemos visto y listo el

botón no se cambiaba pero con esta línea

que decía no lo envías que de acá en

adelante me encargo yo básicamente

vamos a ver que esto funciona

fin de problema hacíamos todo lo que

necesitábamos dentro de esa función

otra opción que vimos por ahí también

era sacar el botón afuera del formulario

entonces como estaba fuera el formulario

no lo envía pero bueno esa es la peor

cita de todas pero igual funcionaba y

era válida en ese momento

solucionábamos sí que pasa esto tiene

varios problemas principalmente tiene un

problema yo voy a volver a dejar cómo

estaba esto no le pongo el evento

folk y voy a volver a tener ese problema

que se me envía el formulario no vamos a

probar

y se reenvía todo se refresca la página

qué pasa

yo le había dicho y esto era el tipo

email por ejemplo y fíjense que si yo

escribo algo

y le pongo enviar si dejo que el

formulario haga lo que tiene que hacer

me valí a esas reglas me dice acá no

tenéis un email

con el cartelito bueno porque son

variaciones de html que las vamos a

hablar ahora un poquito entonces me está

obligando a poner un mes un email y yo

quiero eso entonces una vez que puse el

mail ahí sí me lo manda pero se me

refresca la página cuando yo le pongo el

prevén default o cuando le cambió el

tipo cuando lo sacó afuera el botón lo

que estoy rompiendo son esas reglas html

que le puse venga ya que componen

cualquier cosa y me entró la función

al trabajar el formulario de esta forma

una de las cosas que estoy perdiendo es

el poder de validaciones html que tienen

los formularios y encima hay varias

podríamos decir

en cada input que es requerido con un

rico aire

por ejemplo le ponemos que todo son

obligatorias

y yo hago esto y yo le pongo el prevén

default

esos truquitos que hacíamos

no pongo nada no

y me deja mandarlo entre comillas

javascript

ver que si le sacó el presente fue la k

lo dejo como era voy a poner

correcto

mientras se apuntó algo anda y acá me

dice en estos campos que son aventuras

entonces lo podíamos haber solucionado

así de cualquier forma pero perdemos en

principio perdemos la capacidad de las

variaciones propias que tiene ese

formulario

bueno como se suele decir a esto de una

manera muy sencilla lo que vamos a hacer

es dejar el prevén default y muy bien

o sea recibirlo como parámetro y decirle

bueno no hagas lo que tengas que hacer

porque da cana delante me encargo yo

pero en lugar de escuchar el clic del

botón

quiera que eventualmente no frenaba

todas estas variaciones de html

culpa a este prevén default vamos a

decirle no vos hace lo que tenés que

hacer botón pero que vamos a escuchar en

el evento de envío del formulario el

evento de envío el formulario solamente

se ejecuta si se pasaron estas

variaciones entonces si se pasaron se

van a enviar y una vez que se está

intentando enviar el formulario cuando

se va a hacer ese refresco de la página

lo vamos a atajar nosotros con

javascript

y ahí vamos a seguir haciendo

exactamente lo que queríamos hacer es

simplemente cambiar el evento que

estamos escuchando en vez de escuchar el

clic del botón vamos a escuchar el sap

mid del formulario en este formulario ya

tiene una idea y de forma

voy a dejar por ahí

entonces me agarraré el botón voy a

agarrar el formulario se puede llevar

cualquier cosa del donut

fueron

y ya este formulario y el botón ya no lo

uso más para nada que quede ahí lo que

voy a hacer es escucharle en vez del

clic

obviamente el formulario no tiene un

clic voy a escucharle el admite

son los únicos dos cambios que tuve que

hacer importantísimo el prevén default

ahora que no lo hizo comprueben de folk

va a tener que agregarle a sus funciones

el parámetro de evento y ejecutar en la

primera línea prevén default para que no

haga lo que iba a hacer ese formulario

pues de todas maneras yo te voy a

frenarlo

la diferencia de esto principalmente es

que voy a poder

y ejecutar las validaciones y las reglas

del formulario los obligatorios los

tipos email

por ejemplo

y después si eso es válido se ejecuta mi

javascript miren que si yo le saco algo

el mismo formulario me dice nos llena

los campos y no me llamó a ninguna

función entonces se frenó mucho antes

llamar a javascript y es como que mi

comportamiento lo puse un poquito

después antes lo poníamos

al botón no y lo que estábamos logrando

que se ejecute en nuestro javascript

antes de que se valide ese formulario es

simplemente pararnos un pasito más

adelante con este cambio

simplemente con este cambio escucha del

sambil del forn en lugar del botón

eléctrica del botón hacer cosas raras

como sacarlo afuera

empezamos a procesar y trabajar mejor

con un formulario javascript

principalmente ahora para poder usar

estas variaciones html

que son importantes y se pueden empezar

a usar y mucho

una vez que hice ese cambio

de escuchar el otro evento admita el

formulario acá dentro de la función sigo

como siempre no cambió nada capo seguir

haciendo lo mismo o sea es leer los

inputs y trabajar con esa información

haremos un poquito de eso ya que estamos

mejorando todo esto para leer los inputs

que tenía que hacer agarrarlo de alguna

forma estos tres imputados

con el 2-1 por ejemplo nombre email

documento eres elector

directo

agarrada con una idea el input del email

email por ejemplo le poníamos punto

varió agarramos

y este proceso lo repetimos por cada

input que teníamos en el html eso

implicaba poner de acá a input

y sabemos esto válido se puede hacer

pero hay una forma un poquito mejor de

hacer esto más prolija que nos y siempre

nos va a ahorrar un poquito de código lo

que podemos hacer en lugar de ir

agarrando cada input por separado y

ponerle un ide y obtener el value lo que

podemos usar es algo que se llama el

form data de javascript

sí que es una herramienta que nos

proporciona una manera sencilla para

construir un conjunto de datos que

representan todos los campos de ese

formulario y todos esos campos que están

dentro del formulario que estoy

procesando los puedo obtener todos

juntos en una gran bolsa y después ir

trabajando con ellos a medida que lo

necesito básicamente vamos a lograr el

mismo resultado con un poquito menos de

código eso es lo bueno

cómo se usa el fórmula está el famoso

forum data de javascript

bien en vez de ir a los inputs no vamos

a dejar ningún y demás a menos que lo

necesitemos para otra cosa pero si a

cada uno le vamos a poner un nombre

este nombre importantísimo porque es la

clave de ese input

generalmente el nombre de un formulario

solemos escribirlo igual de lo que está

capturando ese formulario no es la clave

entonces podemos poner name email

name

el nombre en este caso

y name bad word

esto en web 2 van a aprender que cuando

un formula un servidor recibe este

formulario lo que va a ir a buscar son

estas claves que pusimos acá por eso son

los muy importantes los nombres de cada

input dentro del formulario

entonces agregó 3 name miren que y de no

tengo

tenemos el derramada para algo visual y

las validaciones entonces esto no me

sirve más

una vez que tengo eso que tengo con line

toros input yo puedo generar mi fórmula

está

ponemos un nombre cualquier variable y

acá entra escribimos new for data

y entre pares entre paréntesis de que

formulario queremos agarrar agarrar

todos los datos el formulario ya lo

teníamos acá arriba

y el nuevo formulario así que

simplemente lo agrego ya dentro del

paréntesis si no lo tuviera tengo que

agarrarlos generalmente lo vamos a tener

porque ya previamente les designa un

event dicen entonces esto es para

agarrar todos los datos del fondo de una

forma un poquito más sencillo una vez

que lo haga que lo agarre todo esto del

dom no lo necesito más lo voy a hacer

mucho más sencillo como voy a hacer

usando ese objeto fórmula está

ustedes ya empiezan a entender lo que es

un objeto y a él hacerle un get

y acá adentro pongo la clave del valor

del campo en ese formulario la clave del

campo en ese formulario

para el email era el name email pagar

entonces

mi mail es eso y así podría hacer lo

mismo para los tres

campos que tengo en este formulario tres

inputs el formulario entonces el email

primero nombre segundo creo que puse con

clave

name pronaca name' nombre

y el tercero era name password

y esto es password ojo con el pop y pas

agresivo a 15 yo porque suelen pasar

estas cosas

y así obtuve los tres datos de mi

formulario

si tuviese más es simplemente ponerlo en

name cada uno

acá porque los quiero separados yo

podría no agarrar todo bueno cada uno

hará lo que necesita y vamos a imprimir

esos 3

para que se vean que estamos grabando

bien

y ésta empieza a quedar un poquito más

prolijo todo

los otros dos documentos selector acá

bien prueba esto

y

no hay

un hombre franco pago no 345

me apareció

el resultado es lo mismo simplemente un

poco más prolijo usando el fórmula está

en cambio acá puede ser

entonces como nuevo no sólo aparece el

forn deidad

el fórmula está como en decirles

sino que ahora a los inputs va a ser una

muy buena práctica no ponerle allí

porque no lo vamos a necesitar pero sí

ponerles un line como clave de email en

nombre y name password

puesto otra cosa

este nuevo en armas no me daré error

pero me va a quedar vacío

el segundo es nulo nulo y el vacío

porque tuve un problemita de claves puse

nombre y era no vieron que no dio error

nuevo arrojaba kill simplemente medio

vacía que hay que ser prolijo con eso

por último para terminar algo que

pasamos muy por arriba estas variaciones

html que ellos por acá que ahora las

podemos empezar a usar y explotar un

poquito más si trabajamos esta forma

mostrarles que si bien es la idea

en este vídeo profundizar queríamos que

sea un vídeo cortito mostrarles que

existe todo un mundo de validaciones de

formularios que se hacen del lado del

cliente si lo vamos a profundizar en web

2 las validaciones de formularios que se

hacen en el lado del cliente o en el

front end son simplemente cuestiones de

usabilidad no hacen tanto a la seguridad

pero es importante que las hagamos

importante que el usuario sepa de qué

manera tiene que ingresar los datos en

un formulario distinto hizo mal

avisarles entonces aprovechemos hay un

montón si nosotros vamos a ver cuáles

usamos acá creo que usamos

estas de campos requeridos incluso

podríamos usar alguna más por ejemplo en

password podríamos hablar de longitud

mínima no sé 6 por ejemplo incluso hay

una de longitud máxima

con estas variaciones muy sencillas

quizás uno se ahorra mucho código

javascript para validar esto y

simplemente se lo otorga al browser

vamos a probar esa

como nos queda

esto es un email que era obligatorio

porque tenía el recuerdo

y si pongo un valor de 3 me dice que no

por favor

la longitud mínima de 6 actualmente

estás usando 316 menos bandas no se

ejecutó mucho más

me deja ahí más lo deja escribir

simplemente no es que me deja poner

reglamentada frenando estoy intentando

escribir

hay un montón para profundizar las

variaciones html nosotros no las van a

profundizar mucho más que esto pero los

invitamos a que lean un poquito

bien eso fue todo y queríamos hacer un

vídeo corto

hablando de cuál es la forma que

nosotros consideramos más correcta para

trabajar con formularios y javascript

así que en sus prácticos en sus trabajos

recomendamos que usen esta forma que

simplemente cambiar el al evento al cual

se están suscribiendo en el house trip

gracias por escuchar y nos vemos la

próxima