Code n' Social

¿De qué trata esta lección?
En esta lección volvemos a los formularios HTML, analizamos algunas posibilidades de complementar las validaciones ya implementadas. Aprendemos sobre un nuevo elemento de formulario, la entrada del número de tipo de rango y algunos eventos nuevos que se pueden usar con los formularios.

Nuevo elemento de formulario en esta lección:
<input type="range" /> - esta etiqueta HTML se usa para agregar un elemento de entrada a su página, cuando el valor de los números realmente no cuenta, necesitamos las formas de escala.

Nueva propiedad de JavaScript en esta lección:
min – propiedad del elemento de rango, marca el valor más bajo que puede alcanzar.
max – propiedad de elemento de rango, marca el valor más alto que puede alcanzar.
step – propiedad de elemento de rango, Marca la diferencia entre los posibles valores que se pueden alcanzar.
value – esta propiedad se utiliza en caso de elementos de formulario múltiples, para obtener / configurar su contenido.
checked - esta propiedad se utiliza en lugar de la propiedad de valor para los elementos de la casilla de verificación. El valor es lógico: verdadero si está marcado y falso si no está.

Nuevos eventos en esta lección:
onfocus – este evento ocurre cuando hacemos clic o cambiamos con la pestaña a un elemento de formulario, un elemento puede tener enfoque automáticamente (propiedad de enfoque automático).
onfocusout – Este evento ocurre cuando dejamos un elemento de formulario, que tenía el enfoque previamente. Por ejemplo, un cuadro de texto después de la finalización.
onchange – este evento se activa, si se cambia el elemento. Esto es diferente del enfoque, porque los cambios pueden suceder más de una vez entre un enfoque y un evento de enfoque.
onsubmit – este evento se activa si hacemos clic en el botón enviar en un formulario. El evento se relaciona con un formulario.

Nuevo método en esta lección:
isNaN(datos a verificar) – esta función decide si el valor dado es un número, o se puede convertir en número. Devuelve verdadero para datos no numéricos y falso para datos numéricos.

Usando formularios con JavaScript:
Necesitamos agregar nombres e ids a los elementos del formulario para cambiarlos desde el código del programa. Puede haber elementos de formulario sin etiquetas de formulario. Se pueden usar con JavaScript, pero si necesitamos una etiqueta

si queremos enviar el resultado finalmente al servidor web.

Ejemplo de un elemento de formulario sin un formulario real:

Este ejemplo aumenta el tamaño de la imagen con el valor proporcionado a través del cuadro de texto.

En este ejemplo, el cuadro de texto tiene una identificación. Usando este id y la propiedad de valor obtenemos el número escrito en el cuadro de texto. Usamos la función Number nuevamente para convertir el valor de texto a número. Recuerda que si usamos la operación + en el texto no obtenemos el resultado esperado.

Si ingresamos letras o dejamos el cuadro vacío, no se hará ningún aumento.

Formulario de validación de datos con JavaScript:
Anteriormente utilizábamos la validación del código HTML: la palabra clave requerida, el patrón y los elementos de formulario cuidadosamente seleccionados.

Agregar código JavaScript para validar los datos puede significar un mensaje de error personalizado y posibilidades adicionales: puede comparar los valores de diferentes elementos, puede probar el tipo de valor introducido.

Para disminuir la posibilidad de errores, puede ocultar y mostrar nuevos elementos dependiendo del estado de otros elementos.

Ejemplo de validación en formularios reales:

En el ejemplo anterior, verificamos si los cuadros de texto están rellenos y los textos son los mismos.

Hacemos referencia a un cuadro de texto por id y uno por nombre. La segunda referencia necesita el nombre del formulario también.

Atamos la función de validación al evento onsubmit del formulario. El único problema es que los textos introducidos previamente desaparecen y debemos completarlos todos de nuevo, si aparece un error.

Como actualización del ejemplo anterior, este código no da como resultado el restablecimiento del elemento de formulario si aparece un error.

La función se completa con declaraciones de return (devolución) para devolver verdadero si todo está bien y falso si encontramos un error. El valor lógico resultante debe devolverse nuevamente en la fila de etiquetas de formulario.

No hay necesidad de usar la sentencia else en esta función, porque con la sentencia return la función está terminada, los otros if-s no se visitan.

Ejemplo de uso del elemento de entrada de tipo de rango:

En este ejemplo, utilizamos por primera vez un elemento de entrada de tipo de rango.

El ancho de la imagen debe cambiarse junto con el cambio del valor de los elementos.

La lectura del valor se debe hacer cada vez que se cambie. El evento onchange no funcionó desde la etiqueta, por lo que usamos el método addEvenListener para que se ejecute.

Cuando se cambia el elemento de rango, la función change agrega el valor a la propiedad width de la imagen.

Ejemplo de botón de radio:

En el ejemplo de arriba, el formulario tiene dos botones de radio con el mismo nombre, usando este nombre podemos hacer referencia a los botones de radio como uno solo. Para decidir cuál se selecciona, usamos su valor: rojo o azul en este ejemplo. Seleccionando el color y enviando los datos cambiamos el color de fondo.

Usando el valor de retorno false, evitamos que la página se vuelva a cargar y vuelva al fondo blanco.

Ejercicios

1. En forms.html modifica el primer formulario: si se introduce el nombre, modifica los textos del formulario. Por ejemplo, si el nombre es Mike, realiza los cambios: el estado de Mike (en lugar del estado del usuario), la calificación de Mike en nuestra página web y el trabajo soñado de Mike.

Debes asegurarte de que se pueda hacer referencia a los textos - no son exactamente elementos de formulario, por lo que debes encontrarlos por id.

Ver el resultado

2. En el archivo forms.html modifica el segundo formulario: el cuadro de texto muestra un mensaje de error si se envía sin completar, los otros tres elementos del formulario tienen un valor predeterminado y no se pueden establecer vacíos (sin un valor) o con un valor fuera del intervalo definido.

Muestra un mensaje si el cuadro de texto está vacío. Hay un patrón que activará un mensaje de error si el formato es incorrecto. Podríamos usar required (obligatorio), pero usando JavaScript podemos agregar nuestro propio mensaje.

Asegúrese de que al menos una de las casillas esté marcada. También necesitan nombres: en el caso de las casillas de verificación, estos nombres deben ser diferentes (a diferencia de los botones de opción).

Use la declaración de devolución como en el tercer ejemplo (para mantener los datos ya presentados) en esta lección y agregue un nombre al formulario.

Desencadenar un mensaje de éxito, si se cumplen todas las condiciones anteriores.

Ver el resultado

3. Modifica el archivo gallery.html: agrega un elemento de entrada de tipo de rango a la parte Imagen aleatoria, encima de la imagen. El valor de los elementos debe cambiar entre 1 y 6, por un valor de paso de 1. Si se cambia el elemento, la imagen también debe cambiar.

Ver el resultado

4. Modifica el archivo forms.html:

Añade un nuevo formulario para calcular los precios de las lecciones que contenga un cuadro de texto para el número de lecciones necesarias, tres botones de opción para las opciones: individual lesson (por 15 EUR), small group (10 EUR) y larger group (5 EUR). Deberíamos poder marcar solo uno. Debería haber un botón de envío también.

Usa la validación de datos (combinación de HTML y JavaScript) para asegurarte de que el cuadro de texto no esté vacío y contenga un número positivo. Uno de los botones de radio debe estar marcado (podemos marcar uno como predeterminado). Usa mensajes de error si es necesario.

Si todos los datos son correctos, calcula el precio a pagar multiplicando la cantidad de horas y el precio seleccionado. Muestra el resultado en un cuadro de alerta.

Ver el resultado