JavaScript - Añadir condicional en una funcion

   
Vista:

Añadir condicional en una funcion

Publicado por Unexes (30 intervenciones) el 22/09/2014 20:02:41
Hola de nuevo a tod@s.

De nuevo aquí con un problemilla en una función que me muestra una ayuda en un formulario.

Veréis el código que pongo a continuación funciona bien tal cual esta pero quiero añadirle una mejora y hay es donde me estampo y no encuentro la solución, en la siguiente función si el input "nombre personal" se encuentra vacío me muestra un div (id="IntNombre") que dice "ingrese su Nombre" esto es correcto pero lo que quiero es añadirle un segundo condicional al if para que me lo muestre si cumple dos condiciones, si esta vacío y he hecho click en dicho input osea si esta vacio y tiene el foco, tal como esta me lo muestra si esta vacio independientemente si he hecho click o no en dicho input o en otro,
Por supuesto hay varios inputs aunque solo pongo dos por resumir, todos ellos llaman a la misma función.

1
2
<input type="text" name="nombrepersonal" id="nombrepersonal" class="Contenido2forpersonal" maxlength="30"  size="20"  onfocus="informacionrelleno()"/>
<input type="text" name="apellidopersonal1" id="apellidopersonal1" class="Contenido2forpersonal" maxlength="25" size="20" onfocus="informacionrelleno()"/>
y esta es la función
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function informacionrelleno(){
var nombrepersonal = document.getElementById("nombrepersonal");
var apellidopersonal1 = document.getElementById("apellidopersonal1");
if(!nombrepersonal.value){
  			document.getElementById("IntNombre").style.display ="block";
                        document.getElementById("IntNombre").innerHTML="Ingrese su Nombre";
                        return;
                        }else{
			document.getElementById("IntNombre").style.display ="none";
}
if(!apellidopersonal.value){
  			document.getElementById("IntApellido").style.display ="block";
                        document.getElementById("IntApellido").innerHTML="Ingrese su Apellido";
                        return;
                        }else{
			document.getElementById("IntApellido").style.display ="none";
}

Por supuesto he probado cosas como esta y algunas mas
1
if(!nombrepersonal.value && nombrepersonal.focus()){
Pero no funcionan.
Espero que me podáis ayudar, un saludo.
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 xve

Añadir condicional en una funcion

Publicado por xve (1596 intervenciones) el 23/09/2014 07:43:23
Hola Unexes, según entiendo lo que quieres es validar con una sola función la entrada de varios inputs, verdad?

Para ello, la manera que yo utilizaría, seria enviar siempre el objeto a la función para validar, y con el mismo, hacer las validaciones pertinentes.

Aquí te muestro un código, que lo que hace es validar dos inputs (puedes pones los que quieras) y con la misma función te validara todos los inputs que vayas añadiendo.
En vez de utilizar onfocus (cuando recibe el foco), utilizo onkeyup (cuando suelta la tecla), ya que quiero que valide siempre el contenido, no solamente cuando coge el foco.

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
36
37
38
39
40
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
 
	<script>
	function validar(e)
	{
		console.log(e.value);
		if(e.value=="")
		{
			document.getElementById("e"+e.name).style.display ="block";
			document.getElementById("e"+e.name).innerHTML ="Ingrese un valor en el "+e.name;
		}else{
			document.getElementById("e"+e.name).style.display ="none";
		}
	}
	</script>
 
	<style>
	.error {display:none;}
	</style>
</head>
 
<body>
 
<form>
	Introduce un nombre
	<input type="text" name="nombre" onkeyup="validar(this);">
	<div id="enombre" class="error"></div>
 
	<br>Introduce tu apellido
	<input type="text" name="apellido" onkeyup="validar(this);">
	<div id="eapellido" class="error"></div>
 
	<p><input type="button" id="miBoton" value="Botón"></p>
</form>
 
</body>
</html>

Coméntanos si te sirve, ok?
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

Añadir condicional en una funcion

Publicado por Unexes (30 intervenciones) el 23/09/2014 08:42:58
Gracias como siempre xve. por ayudarme.

Lo siento pero creo que me esplique mal y te he hecho perder algo de tu tiempo.

Vamos a olvidarnos de todos los inputs y vamos a centrarnos en uno solo.

Actualmente tal como esta el código, aparece el div "IntNombre" que muestra "Ingrese su Nombre" cuando se cumple una condición, y esta es que el input se encuentre vacio,

Lo que necesito es que el div "IntNombre" me muestre "Ingrese su Nombre" cuando se cumplan estas dos condiciones:
1º) Cuando este vacio tal como lo hace ahora y ademas
2ª) Cuando tenga el ratón situado sobre dicho input para ingresar texto.
si una de las dos no se cumple no me debe mostrar el div.

Por eso intente cosas como esta pero que no me funcionan:
1
2
if(!nombrepersonal.value && nombrepersonal.focus()){
etc....

Gracias por vuestra paciencia y por tu ayuda xve.
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 xve

Añadir condicional en una funcion

Publicado por xve (1596 intervenciones) el 23/09/2014 15:06:20
Ok, entiendo Unexes... no te entendi bien...

La manera, creo que seria:

1
2
3
4
if(!nombrepersonal.value && document.activeElement.name=="nombrepersonal")
{
    ... no tiene contenido y el foco esta en el campo nombrepersonal ...
}

Coméntanos si con esto te vale...
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

Añadir condicional en una funcion

Publicado por Unexes (30 intervenciones) el 24/09/2014 09:31:31
RESUELTO gracias xve.

Es justo lo que necesito y funciona perfectamente.

Para los que saben tan poco como yo y necesitan ayuda de vez en cuando, les dejo como ha quedado el código final::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function informacionrelleno(){
var nombrepersonal = document.getElementById("nombrepersonal");
var apellidopersonal1 = document.getElementById("apellidopersonal1");
 
if(!nombrepersonal.value && document.activeElement.name=="nombrepersonal"){
  			document.getElementById("IntNombre").style.display ="block";
                        document.getElementById("IntNombre").innerHTML="Ingrese su Nombre";
                        return;
                        }else{
			document.getElementById("IntNombre").style.display ="none";
}
if(!apellidopersonal.value && document.activeElement.name=="apellidopersonal"){
  			document.getElementById("IntApellido").style.display ="block";
                        document.getElementById("IntApellido").innerHTML="Ingrese su Apellido";
                        return;
                        }else{
			document.getElementById("IntApellido").style.display ="none";
}
Los inputs en el formulario no sufren ninguna modificación.
Un saludo y gracias a tod@s.
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 xve

Añadir condicional en una funcion

Publicado por xve (1596 intervenciones) el 24/09/2014 21:44:28
Gracias por compartirlo Unexes!!!
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