Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Script para formulario

JavaScript - Script para formulario

Volver
Nuevo Tema
<<>>
 
Vista:

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 24/12/2020 11:33:39
Buenos días gente, y antes de todo Felices Fiestas a tod@s. Esto intentando resolver un ejercico, sobre un script, y no hay manera de poder sacar algo en claro, a ver si me podéis echar alguna mano, os paso el enunciado:

**Escribir un script que valide un formulario que se ha creado antes en HTML. El formulario debe pedir el nombre, la dirección de correo, la edad, y la fecha de nacimiento.

gracias y 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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script para formulario

Publicado por joel (895 intervenciones) el 24/12/2020 16:19:37
Hola gohan, tienes el formulario creado?
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

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 24/12/2020 20:16:57
Buenas @joel, qué va! el formulario no lo tengo creado porqué no sé como poder empezarlo, sé que tiene la forma
<form action> </form>, pero no sé que introducir dentro.

un saludo.
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

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 26/12/2020 13:28:34
Buena!! He creado el formulario, y creo que por los apuntes que me pasastes y videos que he mirado está valido:

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
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Formulario de inscripción</title>
  </head>
  <body>
    <h2>Formulario HTML</h2>
    <form action="">
     <label for="nombre">Nombre:</label><br>
     <input type="text" id="nombre" name="nombre"><br><br>
     <label for="email">Email:</label><br>
     <input type="email" id="email" name="email"><br><br>
     <label for="número">Edad:</label><br>
     <input type="number" id="número" name="número"><br><br>
     <label for="date">Fecha:</label><br>
     <input type="date" id="date" name="date"><br><br>
 
     <input type="submit" onclick="enviarFormulario" value="Enviar">
    </form>
    <script type="text/javascript" src="js/ejemplo.js"></script>
    <p>Haga clic en el botón "Enviar" y los datos del formulario se enviarán.</p>
 
  </body>
</html>


.Lo he creado para el campo de Nombre, email, edad y fecha de nacimiento, como me marca el ejercicio. El problema que me viene ahora es crear las funciones de validación para dicho formulario, únicamente me pone que me las valide ...

He creado esta función, relacionada al evento "onclick" de "submit":

1
2
3
4
5
6
7
var nombre = document.getElementById('nombre');
function enviarFormulario(){
 
    if(nombre.value === null || nombre.value === ''){
      mensajesError.push('Ingresa tu nombre');
    }
}


.Pero no me hace nada, y bueno para la edad, email y fecha de nacimiento si que estoy perdido, a ver si me podéis echar una mano. Gracias y un saludo.
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script para formulario

Publicado por joel (895 intervenciones) el 26/12/2020 13:38:56
Hola Gohan, perfecto!!!

Una manera de validar el nombre con javascript seria:

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 lang="es">
  <head>
    <meta charset="utf-8">
    <title>Formulario de inscripción</title>
  </head>
  <body>
    <h2>Formulario HTML</h2>
    <form action="">
     <label for="nombre">Nombre:</label><br>
     <input type="text" id="nombre" name="nombre"><br><br>
     <label for="email">Email:</label><br>
     <input type="email" id="email" name="email"><br><br>
     <label for="número">Edad:</label><br>
     <input type="number" id="numero" name="numero"><br><br>
     <label for="date">Fecha:</label><br>
     <input type="date" id="date" name="date"><br><br>
 
     <input type="submit" onclick="return enviarFormulario()" value="Enviar">
    </form>
    <p>Haga clic en el botón "Enviar" y los datos del formulario se enviarán.</p>
 
  </body>
</html>
 
<script>
function enviarFormulario() {
    var nombre = document.getElementById('nombre');
    if (nombre.value.length==0) {
        alert("inserta un nombre.");
        return false;
    }
    return true;
}
</script>

Te sirve?


NOTA Hay que decir, que hoy en dia HTML5 puede validar que haya contenido con el metodo required...
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

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 26/12/2020 14:14:01
Buenas!!! Gracias por la respuesta, te pongo el código que he puesto, ya que puse el script justo antes del body y en una página aparte de html, que bien puesto no tiene porque influir:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Formulario de inscripción</title>
  </head>
  <body>
    <h2>Formulario HTML</h2>
    <form action="">
     <label for="nombre">Nombre:</label><br>
     <input type="text" id="nombre" name="nombre"><br><br>
     <label for="email">Email:</label><br>
     <input type="email" id="email" name="email"><br><br>
     <label for="número">Edad:</label><br>
     <input type="number" id="número" name="número"><br><br>
     <label for="date">Fecha:</label><br>
     <input type="date" id="date" name="date"><br><br>
 
     <input type="submit" onclick="return enviarFormulario" value="Enviar">
    </form>
    <p>Haga clic en el botón "Enviar" y los datos del formulario se enviarán.</p>
    <script type="text/javascript" src="js/ejemplo.js"></script>
  </body>
</html>



1
2
3
4
5
6
7
8
function enviarFormulario() {
    var nombre = document.getElementById('nombre');
    if (nombre.value.length==0) {
        alert("inserta un nombre.");
        return false;
    }
    return true;
}

.Puse lo que me dijistes, pero cuando pongo el nombre no me sale nada, ni aunque sólo ponga una letra o vacío, no me sale la alerta.
¿para el tema de email, edad y fecha de nacimiento como sería?(el script)

Gracias y un saludo!.
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script para formulario

Publicado por joel (895 intervenciones) el 27/12/2020 09:24:47
No has copiado bien el código que te puse...en la linea 19 te falta poner los paréntesis de la función!!
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

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 27/12/2020 21:02:43
Buenas noches, y gracias de nuevo por todas tus respuestas, la verdad que os envidio todo lo que sabéis y como lo manejais el javascript. He hecho lo que me dijistes y me sale perfecto, me sale el mensaje de introducir nombre, y le he añadido una alerta de "VALIDADO" cuando se envía el formulario. Ahora estoy agregando los campos de email, edad y fecha, lo puse como condicionales para que me vayan saltando de uno a otro y si son todos correctos (osea pongo algo en el campo, escribo y no lo dejo vacío) me salga el mensaje de "VALIDADO". Te paso el código script que puse, sólo me sale el mensaje del nombre si dejo el campo vacío, de los otros no:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Formulario de inscripción</title>
  </head>
  <body>
    <h2>Formulario HTML</h2>
    <form action="">
     <label for="nombre">Nombre:</label><br>
     <input type="text" id="nombre" name="nombre"><br><br>
     <label for="email">Email:</label><br>
     <input type="email" id="email" name="email"><br><br>
     <label for="número">Edad:</label><br>
     <input type="number" id="número" name="número"><br><br>
     <label for="date">Fecha:</label><br>
     <input type="date" id="date" name="date"><br><br>
 
     <input type="submit" onclick="return enviarFormulario()" value="Enviar">
    </form>
    <p>Haga clic en el botón "Enviar" y los datos del formulario se enviarán.</p>
    <script type="text/javascript" src="js/ejemplo.js"></script>
  </body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function enviarFormulario() {
    var nombre = document.getElementById('nombre');
    var email = document.getElementById("email");
    var numero = document.getElementById("numero");
    var date = document.getElementById("date");
    if (nombre.value.length==0) {
        alert("Inserte un Nombre")
        return false;
    }
    else if (email.value.lenght==0) {
        alert("Inserte un Email")
        return false;
    }
    else if (numero.value.lenght==0) {
        alert("Inserte un número")
        return false;
    }else if (date.value.lenght==0) {
        alert("Inserte una fecha")
        return false;
    }
    alert("VALIDADO");
    return true;
}

No sé donde puedo estar fallando la verdad. Un saludo y gracias.
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script para formulario

Publicado por joel (895 intervenciones) el 28/12/2020 08:07:16
Fíjate como has escrito...
No es lenght... es length!!!

También fíjate que te quite los acentos en los id "numero"... los lenguajes de programación no les gustan los acentos y eñes en las variables.
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

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 28/12/2020 19:24:03
Buenas!! Vale, tienes razón, he quitado lo de los acentos en "number" y he puesto bien "length". Si relleno el campo nombre, pero no pongo edad, me salta el mensaje que el campo de "edad" está vacío, pero en cambio, si tengo tanto el campo de nombre como el de la edad rellenados, se me manda el formulario aún sin haber introducido nada en edad y fecha (no me salta el mensaje de "Inserte una fecha").¿podría ser por el valor "length"?¿cuál debo de poner?
Además el mensaje de "VALIDADO", cuando introduzco los datos en todos los campos ... ahora no me sale ...

buff ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Formulario de inscripción</title>
  </head>
  <body>
    <h2>Formulario HTML</h2>
    <form action="">
     <label for="nombre">Nombre:</label><br>
     <input type="text" id="nombre" name="nombre"><br><br>
     <label for="email">Email:</label><br>
     <input type="email" id="email" name="email"><br><br>
     <label for="numero">Edad:</label><br>
     <input type="number" id="número" name="numero"><br><br>
     <label for="date">Fecha:</label><br>
     <input type="date" id="date" name="date"><br><br>
 
     <input type="submit" onclick="return enviarFormulario()" value="Enviar">
    </form>
    <p>Haga clic en el botón "Enviar" y los datos del formulario se enviarán.</p>
    <script type="text/javascript" src="js/ejemplo.js"></script>
  </body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function enviarFormulario() {
    var nombre = document.getElementById('nombre');
    var email = document.getElementById("email");
    var numero = document.getElementById("numero");
    var date = document.getElementById("date");
    if (nombre.value.length==0) {
        alert("Inserte un Nombre")
        return false;
    }
    else if (email.value.length==0) {
        alert("Inserte un Email")
        return false;
    }
    else if (numero.value.length==0) {
        alert("Inserte un numero")
        return false;
    }else if (date.value.length==0) {
        alert("Inserte una fecha")
        return false;
    }
    alert("VALIDADO");
    return true;
}



Gracias y un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
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

Script para formulario

Publicado por joel (895 intervenciones) el 28/12/2020 20:27:36
Pero si ves que el problema lo tienes en la edad.... revisa el campo del formulario y veras que TIENE EL ACENTO!!!!!
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

Script para formulario

Publicado por gohan_098 (18 intervenciones) el 28/12/2020 20:47:15
Ups ... vale perdona, se me había escapado, ahora si que me funciona perfectamente todo.
Gracia de nuevo y perdona por las molestias, un saludo!!
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Script para formulario

Publicado por joel (895 intervenciones) el 29/12/2020 07:49:27
me alegro que te haya servido... gracias por comentarlo!!!
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