Vamos a continuar codificando nuestro archivo del formulario final con HTML CSS y Swett.
Ahora vamos a codificar nuestro archivo validaciones punto J.S
así que esa es una función para validar los elementos requeridos de nuestro formulario y vamos a enviar
como parámetro el objeto de tipo forma.
Recordemos que por medio del operador Dish lo que hicimos fue enviar el elemento HTML de formulario
a esta función de JavaScript.
Así que lo que vamos a recibir como parámetro en esta función va a ser el formulario HTML de esta página
y para poder acceder a los elementos de este formulario basta con utilizar el nombre de cada uno de
los elementos de este formulario por ejemplo en este caso estamos utilizando el objeto de forma que
básicamente es el formulario HTML y posteriormente colocamos el nombre del elemento del formulario que
queremos obtener.
En este caso es el campo de formulario de tipo input que se declaró en el formulario por ello es importante
que agreguemos un nombre a cada uno de los elementos del formulario ya que así es como vamos a acceder
a cada uno de los elementos de nuestro formulario.
Cualquier duda pueden revisar nuevamente el código HTML y podrán observar que hemos agregado un nombre
a cada uno de los campos de nuestro formulario a los elementos de tipo input.
Por ejemplo en este caso al elemento de tipo input el cual se llama usuario de esta manera accedemos
a este componente.
Sin embargo esto no es directamente el valor sino el elemento de tipo input así que para poder acceder
al valor de este campo de tipo input llamado usuario simplemente mandamos a llamar la propiedad Balio
y lo que hacemos es validar si este campo de usuario es igual a nulo o si es igual a la cadena escribir
usuario.
Esta es la cadena por default que nosotros agregamos.
Así que si es igual a esta cadena entonces quiere decir que el usuario no ha capturado ninguna información
en este campo y debido a que deseamos que este campo tenga un valor es decir es decir que lo vamos a
tratar como un campo con valor requerido entonces en dado caso de que tenga un valor vació o que tenga
la misma cadena por default que nosotros hemos puesto.
Entonces vamos a regresar Fool's mandamos una alerta donde indicamos que el usuario debe proporcionar
un nombre de usuario como siguiente paso seleccionamos este elemento por medio del método Focus se selecciona
este tipo input y posteriormente lo seleccionamos.
Es decir que el cursor se va a posicionar sobre este elemento y hacemos un rito Foss en automático al
regresar Fool's según hemos comentado se detiene la validación de este formulario y también se evita
el envío de este formulario así que el método submit ya no se realiza el envío del formulario con esto
terminamos la validación del campo de usuario
pero así vamos a continuar con cada uno de los campos que deseemos que contenga un valor.
Nosotros definimos cuáles son los campos requeridos.
Puede haber algunos campos que no sean requeridos.
Sin embargo en este caso la idea es que hacemos la mayoría de este tipo de componentes para que sepamos
cómo tratar con este tipo de elementos.
Cuando trabajamos con formularios HTML y las validaciones con JavaScript así como siguiente paso validamos
el campo de password similar al manejo que realizamos del IMPO de tipo usuario también vamos a solicitar
al formulario el campo de password.
Recordemos que esto nos regresa todo el elemento de tipo HTML el componente de tipo input y para poder
validar el contenido de este campo de tipo input necesitamos acceder a la propiedad Balio y en este
caso lo que validamos es que el password si tiene un valor igual a cadena vacía o el valor del password
tiene una longitud menor a tres.
Entonces vamos a indicarle al usuario que este es un valor inválido.
De esta manera es como podemos solicitar el cargo a un elemento de tipo cadena.
En este caso al elemento password le solicitamos el valor y el valor solicitamos el largo de este elemento
es decir la cantidad de caracteres que tiene esta cadena y en dado caso de que el contenido de esta
cadena sea menor a tres caracteres entonces vamos a indicarle al usuario que debe de proporcionar un
valor más largo
mandamos una alerta donde indicamos debe proporcionar un password al menos de tres caracteres.
Ponemos en foco este elemento y posteriormente lo seleccionamos.
Para ello es que realizamos estas dos funciones Focus primero pone en foco este elemento y posteriormente
la función es elec pone el cursor directamente sobre este campo.
Esto para que rápidamente el usuario sepa cuál es el campo que está teniendo problemas y así el usuario
pueda modificar directamente este valor de imput de password.
En nuestro formulario y finalmente hacemos un ritual Fool's debido a que ocurrió un problema en esta
validación cerramos la validación del campo de password y vamos a continuar.
Ahora validamos las tecnologías de interés de manera similar al tratamiento que hemos realizado con
usuario y password.
También procesamos este elemento de tipo tecnología.
Si recordamos este elemento de tipo tecnología fueron elementos de tipo check Boggs así que vamos a
procesar este elemento de manera distinta.
Para ello definimos una variable llamada check seleccionado.
En este caso va a ser igual a fouls y vamos a utilizar esta bandera para saber si el usuario ha seleccionado
elementos de tipo Check
que vamos a utilizar un ciclo.
Iniciamos un contador en cero y posteriormente vamos a ir de este contador hasta el número de elementos
que el usuario haya seleccionado según hemos comentado que si el usuario selecciona más de un elemento
entonces se genera un arreglo.
Por lo tanto podemos solicitar el largo de este arreglo y finalmente tenemos una sección para incrementar
nuestro contador de este ciclo for y preguntamos si el elemento en este caso que estemos seleccionando
de tecnología se ha seleccionado por el usuario.
Es decir que el usuario ha hecho un check y preguntamos si este elemento que estamos procesando si este
primer elemento el usuario ha hecho un check en cuyo caso entonces entramos a este If y en este caso
cambiamos la bandera check seleccionado igual a su así que con esto garantizamos que por lo menos se
ha seleccionado un elemento de este arreglo de check boxes y preguntamos a continuación si el usuario
no ha seleccionado ninguno de estos elementos es decir que si la bandera sigue siendo igual a Fool's
entonces mandamos a imprimir una alerta.
El usuario debe de proporcionar una tecnología al menos y regresamos fouls así que de esta manera es
como podemos procesar estos elementos de tipo check debido a que necesitamos saber si el usuario en
este caso al menos ha seleccionado alguno de estos elementos de tipo tecnología ahora vamos a validar
el radio botón de género obtenemos este elemento de tipo radio botón y vamos a procesar este elemento
de manera similar al tipo check box.
Vamos a utilizar una bandera en este caso para saber si el usuario ha seleccionado un elemento de tipo
radio.
Por lo tanto declaramos la bandera Rádio seleccionado igual a Fool's y revisamos si se seleccionó algún
radio o botón.
Vamos a recorrer este arreglo de elementos de tipo general ya que tenemos dos elementos en nuestro formulario
que se llaman igual.
Por lo tanto podemos preguntar si este elemento que estamos procesando de tipo radio botón ha sido seleccionado
y si ha sido seleccionado entonces cambiamos la bandera azzurro y así se procesa a cada uno de los elementos
de este arreglo y con cualquiera de estos elementos que se haya procesado entonces cambiamos la bandera
azul sin embargo si hemos terminado de procesar este arreglo y aún así el valor de la bandera no cambió
entonces preguntamos entonces preguntamos si esta variable de radio seleccionado es igual a Fool's.
Entonces mandamos a imprimir.
El usuario debe seleccionar el género y hacemos un bretón fouls
vamos a continuar con nuestras validaciones y por último vamos a validar la ocupación y en caso de que
la ocupación tenga un valor vacío entonces mandamos una alerta.
El usuario debe de seleccionar una ocupación y hacemos un bretón Fool's
por último si hemos llegado hasta este punto de nuestra validación de nuestro formulario HTML con JavaScript.
Entonces podemos considerar que este es un formulario válido y mandamos una alerta de que este formulario
es válido y mandamos el mensaje enviando datos y en lugar de regresar Fool's como lo hemos hecho en
cada una de las validaciones anteriores.
Entonces ya podemos regresar el valor de Chú y entonces este formulario se va a enviar al servidor y
con eso terminamos nuestro archivo de validaciones punto J.V.
Recuerden que pueden dar clic en el nombre del archivo.
Sin embargo se les solicita codificar línea a línea.
Este ejercicio.
Este código de validación es para que quede claro este concepto de validaciones con JavaScript.
Por último vamos a agregar nuestro archivo estilos puntos CSS.
Sin embargo este es el mismo archivo que trabajamos en el ejército de formularios HTML así que únicamente
vamos a mencionar los elementos.
Definimos los estilos para el body y para la clase de Fallout agregamos un Jaitt un Font Family y un
Foncillas.
También agregamos un color y con eso terminamos los estilos que estamos definiendo de manera por default
para el elemento de Bodhi y para la clase de FAW posteriormente agregamos un selector de tipo Heydi
un selector único y agregamos los siguientes estilos a este selector.
Un margen de 45 pixeles un ancho de 480 píxeles.
Aquí es donde podemos modificar también el ancho de nuestra tabla.
En dado caso de que queramos manejar otros valores un Texas Laine que se maneje hacia la izquierda un
borde del colapso con el valor de colapso es decir para no dejar espacios entre renglones y columnas
de nuestra tabla.
Y esos son los estilos que vamos a manejar para este selector de tipo Heydi llamado Juan enfásis.
Posteriormente definimos el caption de nuestra tabla HTML agregamos el bonsais de 20 píxeles y también
vamos a modificar los elementos de tipo TH de la tabla HTML así que agregamos el estilo de Foncillas
igual a 14 píxeles un fondo Waite normal y un patín de 12 píxeles en la parte superior e inferior y
15 píxeles en la parte izquierda y derecha de nuestros elementos de tipo th agregamos también un color
con el código hexadecimal siguiente y con eso cerramos los estilos aplicados a nuestros elementos de
tipo TH Cuando estamos utilizando este selector.
Juan Colom enfásis
también agregamos algunos estilos para nuestro elemento de tipo de un padrón de 10 pixeles en la parte
superior e inferior y 15 pixeles en la parte izquierda y derecha para los elementos de tipo TD un color
con el código hexadecimal indicado y un border top de un pixel de tipo sólido y también con el color
indicado.
Cuando terminamos los estilos para nuestros elementos de tipo TD cuando aplicamos el selector Juan Colom
énfasis en esta tabla HTML y a continuación definimos nuestra clase o se Furst con los siguientes estilos
un Bagram con el color hexadecimal indicado un borde right de 10 pixeles sólido y transparente un border
Lez también con 10 píxeles Olid y transparente y son los estilos que vamos a aplicar a esta clase o
First y también agregamos los eventos en este caso el evento de Jabber sobre los elementos T.R y también
definimos lo siguiente a nuestros elementos de tipo TD cuando nos posicionamos sobre el renglón vamos
a cambiar el color y también el background esto para que podamos detectar cuando estamos posicionándonos
sobre cada una de las columnas de nuestra tabla de este formulario.
Con esto terminamos nuestro archivo estilos punto CSS.
Recuerden que cualquier problema pueden dar clic en el nombre del archivo.
Sin embargo se le solicita codificar línea a línea.
Este archivo para que quede más claro el manejo de estilos CSS.
Por último vamos a ejecutar nuestro proyecto y podemos observar lo siguiente en nuestro formulario agregamos
algunos campos que vamos a considerar como campos requeridos así que si el usuario no selecciona alguno
de estos campos no proporciona un valor.
Entonces el formulario cuando demos clic en Enviar nos debe demostrar un mensaje el cual no es válido.
Este formulario nos debe indicar cuál es el problema.
En este formulario entonces estos campos no deben de provocar ningún problema en el envío del formulario
ya que seleccionar o proporcionar información en estos últimos campos es opcional.
En este caso estamos proporcionando varios valores como podemos observar seleccionando los check boxes
el radio botón seleccionando alguna ocupación y dando clic en el botón de enviar.
Si capturamos toda esta información entonces este formulario será válido pero como hemos comentado si
falta alguna de esta información ya que estos campos se consideran requeridos entonces este formulario
va a ser inválido y en dado caso de que el formulario sea válido entonces nos va a mostrar la alerta
formulario válido enviando datos y si damos clic en Aceptar entonces nos va a enviar al recurso en el
servidor.
Pero en este caso como hemos comentado procesar este formulario lo vamos a procesar en otro curso en
el curso de Servlets y JSP ya que es la tecnología que vamos a estudiar.
Del lado del servidor con tecnología Java pero como hemos comentado pueden utilizar cualquier otro tipo
de tecnología ya que el formulario HTML y todo lo que hemos trabajado en este curso es independiente
a la tecnología que utilicemos.
Del lado del servidor como hemos comentado en el elemento Forum de nuestro formulario HTML en lugar
de utilizar el Mezo igual a post pueden cambiar el metro igual a guetto y si hacen ese cambio entonces
van a poder observar que aquí en Where L donde se muestra recurso en servidor se van a ir concatenando
cada uno de los elementos del formulario.
Pero debido a que tenemos un campo de password en el formulario también se va a mostrar aquí el valor
de password en alguno de los elementos que se concatena como parámetro.
Por lo tanto no es deseable que si vamos enviar elementos con información sensible en un formulario
no debemos utilizar el método Goeth sino utilizar el método POST y la información de este formulario.
Si utilizamos el método POST se va a enviar como parte del mensaje HTTP.
Por lo tanto no estamos visualizando en el R.L sino que lo vamos a poder observar de otras maneras.
Esto lo vamos a estudiar a detalle en el curso de Servlets y JSP.
Sin embargo hasta este momento hemos cumplido con el objetivo de este curso poder crear páginas web
en este caso incluyendo formularios HTML utilizando la tecnología de HTML e integrando también las hojas
de estilo CSS y validaciones con el lenguaje de JavaScript.
Como ejercicio extra se les deja probar con varios valores más y también inspeccionar cada uno de los
elementos para que podamos observar cómo conformamos nuestro formulario.
Asociamos las hojas de estilo y también cómo integramos la tecnología de JavaScript a nuestro formulario.
Cabe mencionar que si hemos estudiado cursos anteriores como en este caso el lenguaje Java también se
puede aplicar el modo debug a nuestras funciones de JavaScript.
Así que también se puede utilizar el IDE para ejecutar línea a línea.
Las funciones de JavaScript.
Así que también puede ser una tarea extra la cual no es requerida pero en dado caso de que lo deseen
pueden procesar las funciones de JavaScript de manera paso a paso aplicando el modo debug de la idea
que estén utilizando.
En este caso el IDE NetBeans pero esto es una tarea opcional
como conclusión del ejercicio hemos puesto en práctica las tres tecnologías que estudiamos en este curso
HTML CSS y JavaScript combinados nos permiten crear páginas web mucho más completas y robustas y así
aportar mejores sistemas web a nuestros usuarios finales.
Con esto concluimos nuestro formulario final con las tecnologías de HTML CSS y a la suite.