Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Recorrer a través del DOM todos los cuadros de texto para comprobar si están vacíos

JavaScript - Recorrer a través del DOM todos los cuadros de texto para comprobar si están vacíos

Volver
Nuevo Tema
<<>>
 
Vista:

Recorrer a través del DOM todos los cuadros de texto para comprobar si están vacíos

Publicado por pepemigueh (1 intervención) el 22/03/2021 16:47:17
Buenas, necesito que me ayuden con una práctica la cosa es que la siguiente web haga lo siguiente; Con el código HTML entregado, realiza una función de Javascript que, a través de un bucle, sea capaz de recorrer a través del DOM todos los cuadros de texto para comprobar si están o no vacíos, mostrando un asterisco al lado de los que sí lo estén y cambiando su color de fondo a rojo. Añade el HTML que sea necesario para ello y crea la función de Javascirpt con el nombre "comprobarDatos()"

Gracias, Un saludo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Formulario</title>
	</head>
	<body>
	<form>
            <p>Nombre <input type="text" id="nombre" /></br></br>
			<input id="nombre" name="" required>
            Apellidos <input type="text" id="apellidos" /></br></br>
            Edad <input type="number" id="edad" value="18" min="18" /></br></br>
            Dirección <input type="text" id="direccion" /></br></br>
            Email <input type="email" id="mail" /></br></br>
            Teléfono <input type="tel" id="telefono" /></br></br></p>
            <p><input type="button" value="Comprobar" onclick="comprobarDatos()" /></p>
 
        </form>
    </body>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer a través del DOM todos los cuadros de texto para comprobar si están vacíos

Publicado por joel (895 intervenciones) el 22/03/2021 19:35:25
Hola, no se muy bien como añadir el asterisco... pero para ponerlo en rojo podria ser algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
        <title>Formulario</title>
        <style>
            input.error {
                background-color: Red;
            }
        </style>
	</head>
	<body>
	    <form>
            <p>Nombre <input type="text" id="nombre" /></br></br>
            Apellidos <input type="text" id="apellidos" /></br></br>
            Edad <input type="number" id="edad" value="18" min="18" /></br></br>
            Dirección <input type="text" id="direccion" /></br></br>
            Email <input type="email" id="mail" /></br></br>
            Teléfono <input type="tel" id="telefono" /></br></br></p>
            <p><input type="button" value="Comprobar" onclick="comprobarDatos()" /></p>
 
        </form>
    </body>
</html>
 
<script>
function comprobarDatos() {
    [...document.querySelectorAll("input")].forEach(el => {
        el.classList.remove("error");
        if (el.value=="") {
            el.classList.add("error");
        }
    })
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar