Validación de campos de formulario

Vinced · #1 (**permalink**) 18/09/2013, 10:16

Buenas...me estoy desesperando con esta tontería...

¿Qué estoy haciendo mal?

<!DOCTYPE html>
Escribe tu nombre: <input type="text" id="areadetexto">
<button onclick="validar()">Validar</button>

<script>
var area= document.getElementById("areadetexto").value;
function validar()
{
alert(area)
}
</script>
</html>

La ventana de alerta no me esta recogiendo lo que se pone en el cuadro de texto.

Y, sin embargo, este sí
<!DOCTYPE html>
Escribe tu nombre: <input type="text" id="areadetexto">
<button onclick="validar()">Validar</button>

<script>
function validar()
{
alert(document.getElementById('areadetexto').value );
}

</script>
</html>

Supongo que se debe a que estoy asignado mal la variable....
gr

ocp001a · #2 (**permalink**) 18/09/2013, 10:22

No, se debe a que en el primer caso cuando haces var area= document.getElementById("areadetexto").value; fuera de la función, la instrucción se ejecuta al cargar la página, es decir cuando el campo todavía no contiene nada.

En el segundo caso, al llamar la función cuando el campo de texto ya contiene algo funciona como esperas.

Vinced · #3 (**permalink**) 19/09/2013, 00:26

Gracias!!
Lo que pasa es que, en el primer caso, me interesa que la información se recoja en una variable para poder manejarla después ya que el formulario va a ser más extenso y tendrá más campos.

¿Cómo puedo hacerlo?
En qué momento debo escribir la línea de la variable o cómo?

Mil gracias...
<!DOCTYPE html>
Escribe tu nombre: <input type="text" id="areadetexto">
<button onclick="validar()">Validar</button>

<script>
var area= document.getElementById("areadetexto").value;
function validar()
{
alert(area)
}
</script>
</html>

Vinced · #4 (**permalink**) 19/09/2013, 15:31

Me auto respondo por si le sirve a alguien.
Era culpa de un {

<!DOCTYPE html>
Escribe tu nombre: <input type="text" id="nombre">
Escribe tu apellido: <input type="text" id="apellido">
<button onclick="enviar()">enviar</button>

<script>

function enviar()
{
var n= document.getElementById("nombre").value;
var a= document.getElementById("apellido").value;
if (n==null || n=="")
{
alert("El campo de tu nombre no puede estar vacío");
return false;
}
if (a==null || a=="")
{
alert("El campo de tu apellido no puede estar vacío");
return false;
}
document.getElementById("casa").innerHTML=n+" "+a
}
</script>
<p id="casa"></p>
</html>