Ejercicios

Ejercicio "formulario1.html"

Queremos validar el formulario antes de enviarlo y mostrar un mensaje de error si hay algo incorrecto.

Crea un formulario #form1 que tenga los siguientes campos:

Usa el estilo GRID para mostrar en la primera columna las etiquetas LABEL y en la segunda los campos.

Esta función debe mostrar un mensaje confirm() pidiendo si se desea enviar el formulario. En caso negativo hay que cancelar el envío del formulario haciendo que la función retorne false.

Ejercicio "formulario2.html"

Quitar el código del confirm()

El formulario no se enviará si no están aceptadas las condiciones. En tal caso se debería mostrar un mensaje de advertencia.

Ejercicio "formulario3.html"

Cambiar el mensaje alert() por un mensaje en una etiqueta DIV. El mensaje debe desaparecer automáticamente al cabo de 3 segundos.

Diseñar el mensaje con CSS.

Ejercicio "formulario4.html"

Validar el nombre para que tenga al menos 3 letras. Si no valida debe mostrar un mensaje y no enviar el formulario.

Crea una función llamada validarNombre(). Esta función comprueba el nombre, muestra el mensaje y retorna false si no cumple la validación.

En la función enviar() tienes que usar la función validarNombre()

Mete el código de comprobación de condiciones en una función llamada validarCondiciones()

Ejercicio "formulario5.html"

Validar el teléfono y el correo con unas funciones llamadas validarTelefono() y validarCorreo()

Para realizar la validación hay que usar Expresiones regulares. La expresiones regulares RegExp se utilizan para validación o búsqueda de patrones en cadenas de texto. Cómo son algo complicadas de crear las buscaremos en la web.

Ejercicio "formulario6.html"

Validar las observaciones mediante validarObservaciones()

  1. Validar que se haya escrito algo: al menos 20 caracteres.
  2. Para evitar SPAM no vamos a permitir enlaces. Que no incluya el siguiente texto 'http://'

Ejercicio "carrusel.html"

Usa el carrusel que hay en la siguiente página:

https://www.proinf.net/permalink/carrusel_de_fotos_con_javascript

con tus propias imágenes.

Se pueden obtener imágenes libres de derecho de autor en la web "pixabay.com".

Proinf.net