Dia 21

Practicas/Practicas HTML/Formularios/Introducción_Validaciones_Formularios.txt

@@ -0,0 +1,120 @@
+VALIDACIÓN DE UN FORMULARIO
+
+- Los usuarios se equivocan.
+- Los usuarios pueden ser malintencionados.
+
+La validación sirve para prevenir esos errores y evitar ataques malintencionados.
+
+
+La validación es la comprobación de los datos introducidos por el usuario, si la comprobación obtiene resultado positivo los datos se envían, si es negativo se le indican pautas para corregirlos.
+
+TIPOS DE VALIDACIÓN
+
+- Validación en el front-end (Javascript - Html5)
+- Validación back-end
+- Doble validación  front-end  y back-end
+
+VALIDACIÓN BÁSICA CON HTML5
+
+- Existen diferentes atributos para la validación en Html5:
+
++ maxlength  y  minlength (Tamaño admitido de los campos)
++ min , max y step (Para valores numéricos y de fechas)
++ required Campos obligatorios 
++ Disabled o readonly No se pueden modificar(uno no se envía el otro sí)
+
+
+ESTILOS CSS PARA VALIDACIÓN
+
+:invalid (no pasa)
+:valid (pasa)
+
+Ejemplo
+
+input:invalid,
+select:invalid,
+textarea:invalid {
+  /* Estilos para elementos inválidos */
+  border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
+  background-color: #ffcccc; /* Un fondo de color claro */
+}
+
+ATRIBUTO PATTERN
+
+Nos permite utilizar expresiones regulares(RegExp) para validar distintos tipos de inputs
+
+El atributo title  nos permite completar el mensaje de error que ve el usuario para indicarle pautas de introducción de datos.
+
+Ejemplos de expresiones  regulares para validar datos con el atributo pattern:
+
+1.Nombre de persona (sin caracteres especiales):
+
+    -Solo letras, puede contener espacios.
+    -De al menos 2 caracteres.
+    
+   pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"
+
+2.Apellidos (sin caracteres especiales):
+
+    -Solo letras, puede contener espacios.
+    -De al menos 2 caracteres
+
+   pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"
+
+
+3.Edad (números del 1 al 99):
+
+    -Números del 1 al 99.
+
+   pattern="[1-9][0-9]?"
+
+    -De 1 hasta 200 años.
+  
+  pattern="^(1[0-9]{1,2}|[1-9][0-9]?)$"
+
+
+4.DNI español (ocho dígitos y una letra al final):
+
+    -Ocho dígitos seguidos de una letra (mayúscula o minúscula).
+
+   pattern="\d{8}[A-Za-z]" 
+
+
+5.Matrícula española (4 dígitos y 3 letras):
+
+    -Cuatro dígitos seguidos de tres letras (mayúsculas).
+
+    pattern="\d{4}[A-Za-z]{3}"
+
+6.Teléfono español (9 dígitos):
+
+    -Nueve dígitos consecutivos.
+
+    pattern="[0-9]{9}"
+
+7.Una dirección de email
+  
+    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
+
+8.Un código postal
+
+    pattern="[0-9]{5}"
+
+9.Número entero
+
+   pattern="[0-9]+"   (solo positivos)
+
+   pattern="-?[0-9]+"   (se permiten tambien negativos)
+
+10. Número real
+
+   pattern="-?[0-9]+(\.[0-9]+)?"
+
+
+11. Contraseña fuerte (Minúscula, mayúscula, número y caracter especial)(minimo 8 caracteres)
+
+ pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-])[A-Za-z\d!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]{8,}$"
+
+12. Un color hexadecimal
+
+ pattern="#[0-9A-Fa-f]{6}"

Practicas/Practicas HTML/Formularios/Practica 4/css/style.css

@@ -15,7 +15,6 @@ input:-webkit-autofill:active {
     box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1) inset !important;
     -webkit-text-fill-color: white ;
 } */
-
 html {
   height: 100%;
 }
@@ -41,29 +40,30 @@ body {
 
 .form_title {
   background-color: rgba(0, 0, 0, 0.6);
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
   border-radius: 0.5em;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */
   padding: 0.2em 0;
   text-align: center;
-  color: yellow;
+  color: #ffcb00;
 }
 
 .form_main {
   background-color: rgba(0, 0, 0, 0.6);
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
   border-radius: 0.5em;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */
   padding: 0.3em;
-  color: yellow;
+  color: #ffcb00;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
 }
+
 .form_main > fieldset {
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
   border-radius: 0.5em;
   box-shadow: 10px;
@@ -109,11 +109,35 @@ input:focus {
 }
 
 .btn {
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
 }
 .btn:hover {
-  background-color: rgb(41, 93, 170);
+  background-color: #144b9e;
+}
+
+input:invalid,
+select:invalid,
+textarea:invalid {
+  /* Estilos para elementos inválidos */
+  border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
+  background-color: #ffcccc; /* Un fondo de color claro */
+  color: black;
+}
+input:invalid ~ .verificado{
+  display: none;
+}
+
+input:valid ~ .verificado{
+  display: inline;
+}
+
+input:invalid ~ .erroneo{
+  display: inline;
+}
+
+input:valid ~ .erroneo{
+  display: none;
 }
 
 /* Media Queries */

Practicas/Practicas HTML/Formularios/Practica 4/index.html

@@ -21,19 +21,50 @@
                 <legend>Datos Cliente</legend>
                 <div class="flex_responsive">
                     <label for="nombre">* Nombre</label>
-                    <input type="text" name="nombre" id="nombre" required>
+                    <input type="text" name="nombre" id="nombre" minlength="1" maxlength="40"
+                        pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}" 
+                        title="El nombre puede contener entre 1 y 40 caracteres letras y numeros"
+                        required>
+                        <span class="verificado">Verificado</span>
+                        <span class="erroneo">El nombre puede contener entre 1 y 40 caracteres letras y numeros</span>
                 </div>
+                <div></div>
                 <div class="flex_responsive">
                     <label for="apellidos">* Apellidos</label>
-                    <input type="text" name="apellidos" id="apellidos" required>
+                    <input type="text" name="apellidos" id="apellidos" minlength="1" maxlength="40"
+                    pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}" 
+                    title="Los apellidos pueden contener entre 1 y 40 caracteres en total"
+                    required>
                 </div>
                 <div class="flex_responsive">
                     <label for="telefono">* Telefono</label>
-                    <input type="tel" name="telefono" id="telefono" required>
+                    <input type="tel" name="telefono" id="telefono" 
+                    pattern="[0-9]{9}"
+                    title="El numero de telefono debe ser de 9 digitos"
+                    required>
+                </div>
+                <div class="flex_responsive">
+                    <label for="dni">* Dni</label>
+                    <input type="text" name="dni" id="dni"
+                    minlength="9" maxlength="9"
+                    pattern="\d{8}[A-Za-z]" 
+                    title="Dni en formato 33340763D"
+                    required>
+                </div>
+                <div class="flex_responsive">
+                    <label for="matricula">* Matricula</label>
+                    <input type="text" name="matricula" id="matricula" 
+                    pattern="\d{4}[A-Za-z]{3}"
+                    minlength="5" maxlength="7"
+                    title="Matricula en formato 7935JPC"
+                    required>
                 </div>
                 <div class="flex_responsive">
                     <label for="email">* Email</label>
-                    <input type="email" name="email" id="email" autocomplete="on" required>
+                    <input type="email" name="email" id="email" autocomplete="on" 
+                    maxlength="100"
+                    title="Introduce un mail valido"
+                    required>
                 </div>
             </fieldset>
             <fieldset>