Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » no mostrar div si hay un campo required aun sin completar

JavaScript - no mostrar div si hay un campo required aun sin completar

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

no mostrar div si hay un campo required aun sin completar

Publicado por Eduardo (173 intervenciones) el 24/05/2020 15:53:33
Hola.. espero que todos estén muy bien...

Explicación Preliminar:
Tengo un div oculto el cual al hacer clic en el botón enviar aparece dicho div... ese div contiene un gif de un preload y el texto "espere cargando..." puesto que es para enviar un formulario que aveces tarda un poquito y poner ese mensaje de "cargando" resulta muy agradable para que se espere mientras se procesan los datos(es un formulario que crea campos para enviar luego con un arreglo []) y se pasa al php que procesa y envía a la base de datos.. todo funciona bien

Solo que al oprimir el botón de enviar y si hay un campo con required al que le salta la alerta (Completa este Campo) que se debe obligatoriamente llenar...

Pregunta Concreta:
¿Existe alguna manera que si estas alertas required salen en los campos requeridos, no salga ese Div oculto hasta que este todo el formulario OK...?

Codigos y Recursos utilizados:


Este es el code del div:

1
2
3
<div id="alerta">
    <p><b> <img src="cargando-pro.gif" width="32" height="32" /><span class="fg"> Enviando, por favor espere...</span></b></p>
</div>


Este es el code css el cual oculta el div al cargar la pagina:

1
2
3
4
5
6
7
8
9
10
<style>
#alerta{
    margin-top:1 0px;
    display: none;
}
 
#alerta p{
    color: #FF0000;
}
</style>

Este es el código del botón del formulario que activa el evento mostrar al ser pulsado y muestra el div oculto

1
<input name="botons" type="submit" class="boton" id="button" value="Enviar" onclick="mostrar()" />

y este el script que muestra el div oculto...

1
2
3
4
5
6
7
8
9
10
11
<script>
window.addEventListener("load",mostrar);
function mostrar() {
  var x = document.getElementById('alerta');
  if (x.style.display === 'none') {
      x.style.display = 'block';
  } else {
      x.style.display = 'none';
  }
}
</script>

Captura de Pantalla del problema:

ima222


Espero me puedan ayudar... mil gracias a Todos...
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
sin imagen de perfil
Val: 59
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

no mostrar div si hay un campo required aun sin completar

Publicado por luis (22 intervenciones) el 28/05/2020 04:17:51
Es sencillo. Tienes que crear una función con condicionales en cascada, cada uno de los cuales lleve aparejado un "return", de manera que si al pulsar "enviar" y algún campo está vacío o con dato erróneos pues se ejecuta el return y una alerta indicándo al usuario lo que falta por poner.

Al final de dicha función pondríamos mostrar() como meta para que se ejecute, pero siempre y cuando se hayan salvado todos los returns previos.

Te he realizado pequeño código de muestra para que veas el funcionamiento. Si no rellenas el campo te aparece una alerta de advertencia. Si lo rellenas el programa sigue su curso y el gif animado se hace visible.

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
<html>
 
<head>
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<script language=javascript>
 
function enviarprueba(){
 
if(f1.nombre.value==''){alert('el campo no puede estar vacio');return}
 
f1.muneco.style.visibility='visible'
 
}
 
</script>
 
<body ><form name=f1>
 
 
<p>Pon tu nombre aquí <input type="text" name="nombre" size="20">&nbsp;
<input type="button" value="enviar" name="B1" onclick="enviarprueba()">&nbsp; </p>
<p>
<img name=muneco border="0" style="visibility: hidden" src="https://i.pinimg.com/originals/ff/e6/de/ffe6dee809cad8081e0e9b18504fcb92.gif" width="256" height="256"></p>
 
 
</form>
</body>
 
</html>
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
Imágen de perfil de Eduardo Arroyo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

no mostrar div si hay un campo required aun sin completar

Publicado por Eduardo Arroyo (173 intervenciones) el 28/05/2020 04:39:45
Entonces me toca quirarle a los campos obligatorios el required y crear el js las validaciones para que estos muestren alertas cuando se tratan de enviar vacios?
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