JavaScript - Problemas de base con validaciones en JS (novato)

 
Vista:
sin imagen de perfil

Problemas de base con validaciones en JS (novato)

Publicado por Victor (13 intervenciones) el 08/12/2013 14:41:20
Buenas,

Vuelvo sobre mis pasos porque estoy teniendo muchos problemas que supongo que son de base. ¿Me podéis ayudar, por favor? Estaré muy agradecido.

CASO 1
Este formulario, lanza la validación hecha en JS mediante ventanas de alert.
Comprueba nombre, comprueba apellido y cuando termina, a pesar de que los campos están vacíos sigue adelante, cuando debería detenerse

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function enviar()
{
 
<!--recogida de variables-->
var ok = true;
var name = document.getElementById("nombre").value;
var user = document.getElementById("apellido").value;
 
if (name==null || name == "")
{
alert("Este campo no puede estar vacio");
ok = false
}
if (user==null || user == "")
{
alert("Este campo no puede estar vacio");
ok = false
}
 
}
</script>
</head>
 
<body>
 
<form id="prueba" method="post" action="resultado.php" onsubmit="return enviar(this)">
Tu nombre <input text id="nombre" name="nombre"><br />
Tus apellido <input text id="apellido" name="apellido"><br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</form>
</body>
</html>

CASO 2
En el siguiente formulario, en vez de incluir un action en el form, le digo que me cargue una nueva página web cuando las validaciones sean correctas. Sin embargo, cuando termina la validación en vez de lanzar la nueva página, la url me cambia por esto validacionyenvio.html?nombre=dede&apellido=dedede. Algo que también me aparece si los campos están vacíos después de las validaciones. ¿Por qué? ¿Qué significa?

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 PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function enviar()
{
 
<!--recogida de variables-->
var ok = true;
var name = document.getElementById("nombre").value;
var user = document.getElementById("apellido").value;
 
if (name==null || name == "")
{
alert("Este campo no puede estar vacio");
ok = false
}
if (user==null || user == "")
{
alert("Este campo no puede estar vacio");
ok = false
}
else
{
window.location.assign("resultado.php")
}
ok = true;
}
</script>
</head>
 
<body>
 
<form id="prueba" onsubmit="return enviar(this)">
Tu nombre <input text id="nombre" name="nombre"><br />
Tus apellido <input text id="apellido" name="apellido"><br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</form>

CASO 3
En esta otra ocasión he cambiado document.getElementById("nombre").value; por document.getElementsbyName para terminar de entender cuál es la diferencia. Esto es importante porque después la información la voy a insertar en una bbdd. En este caso, no sucede absolutamente nada y no sé por qué

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
41
42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function enviar()
{
 
<!--recogida de variables-->
var ok = true;
var name = document.getElementsByName("nombre");
var user = document.getElementsByName("apellido");
 
if (name==null || name == "")
{
alert("Este campo no puede estar vacio");
ok = false
}
if (user==null || user == "")
{
alert("Este campo no puede estar vacio");
ok = false
}
else
{
window.location.assign("resultado.php")
}
ok = true;
}
</script>
</head>
 
<body>
 
<form id="prueba" method="post" onsubmit="return enviar(this)">
Tu nombre <input text name="nombre"><br />
Tus apellido <input text name="apellido"><br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</form>
</body>
</html>
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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problemas de base con validaciones en JS (novato)

Publicado por xve (2100 intervenciones) el 08/12/2013 20:33:30
Hola Victor, cuenta un poco seguir tu código ya que no esta tabulado correctamente, pero intento comentarte...

CASO 1
La función js que devolver el true o false para indicar si continua o no el proceso.
1
return ok

CASO 2
No se de donde saca tu código la pagina validacionyenvio.php ya que no esta en tu código¿? seguro que es ese el código?

CASO 3
Igual que cuando utilizas getElementById, en getElementByName tambien tienes que indicar que quieras hacer con ese objeto... para tu caso, te falta poner el value.
Tendría que ser algo como:
1
var name = document.getElementsByName("nombre").value;

Coméntanos, 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
sin imagen de perfil

Problemas de base con validaciones en JS (novato)

Publicado por Victor (13 intervenciones) el 09/12/2013 22:38:06
Buenas,

En primer lugar muchas gracias por responder tan rápido. He pasado el día haciendo pruebas pero sigo teniendo algunos errores que son, sobre todo, dudas que no termino de entender.

El primer caso está arreglado. He quitado la variable booleana ok y he jugado directamente con return. De esa forma, consigo que el código se detenga.

El segundo, validacionyenvio es el nombre del fichero. Pero el tema está en que se detiene ahí (es decir, en la misma página con los interrogantes) y no avanza al script php que es donde quiero llegar.

Lo soluciono incluyendo el action y el method correspondiente en el formulario. Y efectivamente consigo que haga lo que quiero (a. valida b.pasa a la siguiente página) pero me quedo con la sensación de que hay dos partes del código que dicen lo mismo.

Por un lado

else
{
window.location.assign("resultado.php")
}

Que viene a decir, si no me equivoco, que cuando se ejecute la función, si todo es correcto se vaya hacia a esa página.

Y otra parte, dentro de form

<form class="formulario" id="registro" onSubmit="return enviar();" action="registro_aceptado.php">

Sin embargo, si quito la parte de action me da el problema que hemos comentado y si quito la parte de window.location no me ejecuta la funcion. ¿Deben convivir ambas instrucciones?

Entendido el tema del caso 3, y volviendo al caso 2, mi pregunta es la siguiente: yo puedo definir un input con id para que juegue su papel en la validación y, al mismo tiempo, con name para después el paso de variables por php y con POST? O me va a dar problemas a largo plazo? En principio, me funciona...

Mil gracias por todo
Adjunto el caso 2 modificado

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function enviar()
{
 
<!--recogida de variables-->
 
var name = document.getElementById("nombre").value;
var user = document.getElementById("apellido").value;
 
if (name==null || name == "")
{
alert("Este campo no puede estar vacio");
return false
}
if (user==null || user == "")
{
alert("Este campo no puede estar vacio");
return false
}
else
{
window.location.assign("resultado.php")
}
}
</script>
</head>
 
<body>
 
<form id="prueba" action="resultado.php" method="post" onsubmit="return enviar(this)">
Tu nombre <input text id="nombre" name="nombre"><br />
Tus apellido <input text id="apellido" name="apellido"><br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</form>
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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Problemas de base con validaciones en JS (novato)

Publicado por xve (2100 intervenciones) el 10/12/2013 07:24:37
Hola Victor, no entiendo muy bien parte de tu código...
Si en tu función devuelves true, ya se enviara automáticamente el formulario, no es necesario hacer el window.location..., simplemente devuelve true

Que hay en la pagina resultado.php?
Puede ser que ahí haya algo que et envié nuevamente a la página: validacionyenvio.php?

Espero que quede un poco mas claro... coméntanos, 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
sin imagen de perfil

Problemas de base con validaciones en JS (novato)

Publicado por Victor (13 intervenciones) el 11/12/2013 21:43:58
Gracias,
Aquí la clave estaba en una mala utilización de los return.
De momento, todo marcha (al menos, la versión reducida), ahora vamos a complicarlo mucho.
Quiero darte las gracias por la rapidez y eficacia con la que me has respondido tío :)
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