Bien vamos a continuar.
Ahora lo que vamos a hacer es agregar el código a nuestro archivo de funciones JS Básicamente lo que
va a tener este archivo es el método validar forma para poder validar cada uno de los elementos de este
formulario.
Vamos a detener las fichas y cerramos ese tabulador vamos a dar doble clic sobre nuestro archivo de
funciones y vamos a empezar a escribir lo siguiente.
Básicamente va a tener la función llamada a validar forma iba a recibir el objeto forma
como podemos observar estamos enviando al objeto 10 es decir todo el objeto de tipo form de HTML.
Eso es lo que va a recibir este método validar forma todo el objeto de tipo forma de HTML bien abrimos
el cuerpo de esta función y vamos a escribir lo siguiente Vamos a validar el usuario así que vamos a
recuperar el objeto usuario ponemos forma junto y recuperamos el elemento usuario recordemos que este
elemento lo hemos definido en esta sección es un elemento de tipo input texto y el elemento se llama
usuario así que esto es lo que estamos recuperando y lo que vamos a hacer es validar si este usuario
vamos a preguntar.
Si contiene un valor igual a la cadena vacía
si el valor de este campo de usuario es igual.
A escribir usuario que es el texto que hemos agregado incluso podemos copiar este texto si el usuario
no ha modificado este valor entonces vamos a decirle al usuario por medio de una alerta vamos a decirle
que debe de proporcionar un nombre de usuario
punto y coma y posteriormente ponemos el foco sobre el elemento usuario y también seleccionamos este
elemento para que el usuario sepa qué es lo que debe de modificar.
Y retornamos folks debido a que este formulario si fuera válido entonces se va a hacer el envío de esta
información a la acción que hemos indicado es decir al servlet pero en este caso si regresamos fouls
por medio de este método entonces no se va a hacer el envío de este formulario y regresa al usuario
para indicarle cuál es el campo que debe de modificar o corregir bien así que con eso ya tenemos la
validación del usuario ahora vamos a validar el password.
Definimos una variable llamada password y por medio de la forma solicitamos el campo de password que
si recordamos el HTML fue el siguiente elemento que definimos con el nombre de password el cual también
es un elemento de tipo input pero de tipo password para que no se vean los caracteres en el navegador.
Y ahora vamos a hacer una validación similar.
Preguntamos si el valor del password es igual a cadena vacía o el password
el valor del password.
Vamos a preguntar el largo si es menor que tres entonces debe de proporcionar un password mayor que
tres elementos obviamente puede modificar esta validación pero solamente es para que proporcione un
password mayor a tres elementos si proporciona un password menor entonces vamos a mandar el mensaje
debe proporcionar un password al menos de tres caracteres Punto y Coma y hacemos algo muy similar que
el usuario en dado caso de error mandamos a llamar.
El evento Focus de este elemento de tipo input y posteriormente seleccionamos este elemento para que
el usuario sepa qué es lo que debe de modificar y el formulario regresa falso debido a que el usuario
debe de corregir este valor.
Ahora vamos a validar las tecnologías de interés definimos una variable tecnologías
y recuperamos los elementos de tipo check box.
Vamos a revisar las tecnologías podemos observar que son varias.
Tenemos tres elementos de tipo check box así que esto posiblemente nos pueda regresar un arreglo de
datos pero vamos a revisarlo.
Definimos una variable llamada exseleccionado inicialmente con el valor de falso y ahora vamos a revisar
si se seleccionó algún elemento de tipo check box de las tecnologías proporcionadas al usuario así que
vamos a hacer un fork definimos nuestro contador igual a cero.
Posteriormente y menor qué tecnologías punto le incrementamos nuestro contador y más más y ahora vamos
a preguntar si tecnologías en este caso como son varios elementos.
Preguntamos si el elemento que estamos liderando en este momento ha sido chequeado en cuyo caso entonces
activamos la bandera de Check seleccionado
la ponemos igual ya que algunos de los elementos se ha seleccionado terminamos de iterar cada uno de
estos elementos ya que solamente estamos buscando si se ha seleccionado alguno de estos elementos los
elementos del tipo check de las tecnologías y ahora revisamos en caso de que no sea seleccionado ninguno
de estos elementos de tipo tecnología.
Es decir que la bandera es igual a falsa.
Entonces mandamos una alerta debe seleccionar una tecnología punto y coma y retornamos fouls bien así
que con esto ya estamos revisando también las tecnologías seleccionadas ya que es un elemento requerido
no puede estar vacío.
Ahora vamos a revisar el género ya que también son varios elementos de tipo radio Botton.
A diferencia del CHEC en este caso se pueden seleccionar varios elementos.
En el caso del radio botón únicamente se puede seleccionar un elemento ya que ambos elementos se llaman
igual pero tenemos los valores.
Hombre y mujer sin embargo esto nos va a regresar un arreglo.
Por lo tanto en forma apuntó género nos regresa un arreglo ya que son varios valores relacionados con
este mismo nombre.
Y también vamos a declarar una variable para saber si el usuario ha seleccionado este elemento.
Inicialmente la variable radio seleccionado va a estar en falso y ahora revisamos si se ha seleccionado
alguno de los géneros
y tenemos cada uno de los elementos e incrementamos nuestro contador
y preguntamos si alguno de los elementos de tipo género se ha seleccionado.
Es decir que tiene la propiedad de CHEC entonces Radio seleccionado igual a Chum y ahora preguntamos
si no se ha seleccionado ningún elemento de tipo radio
entonces mandamos una alerta
debe seleccionar un género y retornamos también falso y por último validamos la ocupación
forma apuntó ocupación y preguntamos si ocupación punto valio es igual a cadena vacía Entonces mandamos
una alerta
debe seleccionar una ocupación y regresamos.
Falso.
Los demás elementos ya no van a ser requeridos por lo tanto si los proporciona el usuario o no ya no
vamos a validarlos.
Ahora una vez que hemos llegado hasta este punto si no hemos hecho rubito en Fox entonces quiero decir
que el formulario es válido así que en este caso en este punto ya el formulario es válido y entonces
regresamos retorné tu podemos poner una alerta solamente para saber que el formulario ya es válido
formulario válido.
Envíando datos.
Al servidor
formulario es válido y con eso ya tenemos la validación de nuestro formulario.
Vamos a revisar debe de estar detenido glacis damos doble clic sobre el archivo para que nos abra este
elemento del lado izquierdo damos clic derecho aquí también
debe estar apuntando correctamente a recursos y agonal funciones punto J.S y ese archivo también debe
de llamarse funciones J.V dentro de la carpeta de recursos y ya se ha construido nuestro proyecto y
ahora vamos a ejecutarlo.
Damos clic derecho y Rohn y esperamos a que termine de levantarse glacis
bien vamos a revisar primero si ya está cargando correctamente este archivo damos clic derecho.
Posteriormente ver código fuente de la página y de igual manera que las hojas de estilo si damos clic
sobre este archivo debe descargarlo si no lo carga.
Damos refresh y Podemos se va que en este momento ya está cargando la información correctamente.
El archivo de funciones JS ya que si no lo carga entonces quiere decir que algo está apuntando mal a
este archivo o que no es un archivo público en cualquiera de los casos se debe de corregir la ruta y
también debe estar apuntando correctamente al archivo funciones JS.
Bien ahora vamos a revisar si está funcionando correctamente si damos clic en enviar este formulario
por Defour.
No debería ser válido ya que tanto los elementos de usuario password tecnologías género ocupación etcétera
son elementos requeridos excepto música favorita y comentarios.
Estos elementos no se validaron pero todos los demás elementos sí se validaron para que reconozca el
acento.
Vamos a agregar un meta agregamos el elemento meta y el atributo de Chart set up de f medio 8 guardamos
cambios refrescamos y podemos observar que con Uncharted VF 8 ya carga correctamente los acentos.
Entonces vamos a dejar esos elementos así y si damos clic en Enviar Podemos se va que nos muestra el
mensaje debe de proporcionar un nombre de usuario así que proporcionamos un usuario.
Por ejemplo el valor de Juan si damos clic en Enviar nos solicita un password al menos tres caracteres
ponemos el password de 1 2 3 si damos clic en Enviar ya no realizó las siguientes validaciones así que
algo aquí estuvo mal.
Esto es un error ya que no realizó las validaciones de tecnologías.
Vamos a revisar y en este caso el elemento se llama tecnología en singular.
Aquí me equivoqué.
Debe de ser forma tecnología y lo que regresa es un arreglo estudiás correcto está en plural tecnologías
y todo lo demás se trabaja como tecnologías.
Una vez corregido este nombre que es en singular también esta variable tecnologías aquí lo escribí mal
debe ser tecnologías.
Bien con esto ya validado vamos a ejecutar nuevamente si no cargar estos cambios entonces tenemos que
detener las Fizz y volver a hacer clic también y ejecutar.
En este caso vamos a probar haciéndolo directamente damos un derecho rol.
Una vez hecho estos cambios bien vamos a revisar nuevamente escribimos el usuario.
Posteriormente el password y damos siguen enviar y podemos observar el mensaje debe seleccionar una
tecnología así que con esto ya está funcionando la validación de la tecnología.
Seleccionamos tres elementos damos clic en Enviar y ahora nos manda el mensaje debe de seleccionar un
género.
Seleccionamos algunos de los géneros.
Podemos observar que solamente debe de ser 1.
Seleccionamos algunos de los géneros damos siguen enviar y aquí también hay un error.
Vamos a revisar aquí tengo un error debe de ser Rádio seleccionado guardamos cambios y ejecutamos la
Moshi derecho Ron
proporcionamos los valores.
Juan password 1 2 3 seleccionamos las tres tecnologías y seleccionamos un género damos siguen enviar
y podemos observar que ya hemos pasado la validación.
Ahora nos muestra el mensaje debe seleccionar una ocupación seleccionamos alguna ocupación y damos clic
en Enviar y Podemos se va.
Si hemos llegado a ese punto de la validación entonces el formulario ya es válido y nos manda el mensaje
enviando datos al servidor.
Damos clic en Aceptar y podemos observar que ya hemos llegado al servlet con los datos correctamente
proporcionados por ello fue importante realizar también esta validación del lado del cliente ya que
de esa manera nos aseguramos que cuando llega la información al servidor ya va a llegar una información
filtrada y con eso podemos garantizar que la información del lado del servidor ya la podemos empezar
a manipular bien de momento vamos a dejar hasta aquí este video ya que el siguiente paso vamos a agregar
el código a nuestro servlet para procesar esta petición pero ahora del lado del servidor y poder responder
con información hacia nuestro cliente eso es todo por este video y nos vemos en el siguiente.
Saludos.