JavaScript - Mostrar un mensaje en un textarea según el valor introducido en un input

   
Vista:

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 14/11/2016 09:14:03
Buenos dias
Tengo varias dudas en este ejercicio

Ejercicio 4
* 4. Controla que cada vez que el usuario escribe una letra en un input se
* muestre un mensaje en el TextArea con el valor del input y si su valor es válido.
Para saber si un input es válido ten en cuenta qué:

a. No se debe enviar el formulario si alguno de los inputs es incorrecto.
b. InputNombre no puede empezar por un número y debe contener entre 3 y 20 caracteres.
c. InputCodigo debe tener 13 números, ninguna letra (puedes utilizar una expresión regular para validar).
d. InputDia , inputMes y inputAno deben formar una fecha válida.

El HTML ya lo tengo hecho y la parte que muestre un mensaje en el textarea cada vez que escribe una letra en el input tengo hecha la funcion, pero no me muestra nada. Las demas partes no las tengo hechas.
Este es mi codigo HTML

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
43
44
45
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="formulario.js" type="text/javascript"></script>
        <link rel="stylesheet" href="./formulario.css" type="text/css">
    </head>
    <body>
        <form name="formulario" method="post" action="ejemplo.php">
            Nombre Producto: <input type ="text" id="texto" name="nombre" placeholder="Nombre" size ="30" onkeyup="recibir()" /> <br/>
            Codigo de Barras:<input type="text" id="codigo" name="codigo" placeholder="codigo" size="15" /> <br/>
            Caducidad dia : <input type="text"  id="dia" name="dia" placeholder="Dia" size="5" />
            mes :<input type ="text" name="mes" id="mes" placeholder ="Mes" size ="5" />
            año :<input type="text" name="año" id="anio" placeholder="Año" size="5" /> <br/>
 
            <p>
                Oferta :
                <select  id="ofertas">
                    <option value="1">Normal</option>
                    <option value="2">2x1</option>
                    <option value="3">20%</option>
                    <option value="4">10%</option>
 
                </select>
            </p>
            Congelado  <input type="checkbox" id ="checkbox1"/>
            Fruta <input type="checkbox" id="checkbox2"/>
            Snack<input  type="checkbox" id="checkbox3"/><br/>
 
            <input class="boton" type ="submit" name="registrate" value="Registrate"/>
            <input class="boton" type="button" name="limpiar" value="Limpia el formulario"/>
            <input class="boton" type="button" name="guardar " value="Guardar datos"/>
            <input class="boton" type="button" name="recuperar" value="Recuperar datos"/><br/>
 
             <textarea id ="area" rows="2" cols="50">
            TextArea con la información del formulario
 
                </textarea>
 
            <button onclick="nombre_funcion()">Enviar</button>
        </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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por xve (1774 intervenciones) el 14/11/2016 10:47:15
Hola Javier, aquí te adjunto como seria para validar el nombre, que empieze por una letra y que tenga entre 3 y 20 caracteres...

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--         <script src="formulario.js" type="text/javascript"></script> -->
<!--         <link rel="stylesheet" href="./formulario.css" type="text/css"> -->
    </head>
    <body>
        <form name="formulario" method="post" action="<?php echo $_SERVER["PHP_SELF"]?>">
            Nombre Producto: <input type ="text" id="texto" name="nombre" placeholder="Nombre" size ="30" onkeyup="validarNombre(this.value)" /> <br/>
            Codigo de Barras:<input type="text" id="codigo" name="codigo" placeholder="codigo" size="15" /> <br/>
            Caducidad dia : <input type="text"  id="dia" name="dia" placeholder="Dia" size="5" />
            mes :<input type ="text" name="mes" id="mes" placeholder ="Mes" size ="5" />
            año :<input type="text" name="año" id="anio" placeholder="Año" size="5" /> <br/>
 
            <p>
                Oferta :
                <select  id="ofertas">
                    <option value="1">Normal</option>
                    <option value="2">2x1</option>
                    <option value="3">20%</option>
                    <option value="4">10%</option>
 
                </select>
            </p>
            Congelado  <input type="checkbox" id ="checkbox1"/>
            Fruta <input type="checkbox" id="checkbox2"/>
            Snack<input  type="checkbox" id="checkbox3"/><br/>
 
            <input class="boton" type ="submit" name="registrate" value="Registrate"/>
            <input class="boton" type="button" name="limpiar" value="Limpia el formulario"/>
            <input class="boton" type="button" name="guardar " value="Guardar datos"/>
            <input class="boton" type="button" name="recuperar" value="Recuperar datos"/><br/>
 
             <textarea id ="area" rows="2" cols="50">
            TextArea con la información del formulario
 
                </textarea>
 
            <button onclick="nombre_funcion()">Enviar</button>
        </form>
 
    </body>
</html>
 
<script>
function validarNombre(valor){
	if(valor.length>=3 && valor.length<=20)
	{
		var re=/[0-9]/;
		if(valor[0].match(re))
		{
			document.getElementById("area").innerHTML=valor;
		}else{
			document.getElementById("area").innerHTML="Tiene que empezar por un numero";
		}
	}else{
		document.getElementById("area").innerHTML="Tiene que tener entre 3 y 20 caracteres";
	}
}
</script>

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
2
Comentar

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 14/11/2016 12:09:52
Ok, gracias
Cuando llegue a casa lo pruebo
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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 14/11/2016 22:08:31
Lo he probado pero nunca me muestra el mensaje "tiene que empezar por un numero", y otra cosa por ejemplo escribo en el input 3pepe, y me lo muestra, cuando se supone que debe escribirlo cuando no empieza por un numero?no¿ ya que el ejercicio dice .
InputNombre no puede empezar por un número y debe contener entre 3 y 20 caracteres.
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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 14/11/2016 23:23:09
Lo he solucionado poniendo :

var re = /^[^0-9]/;

Ahora si por ejemplo escribo 5pepe, me dice que tiene que empezar por un numero en el textarea,
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 xve

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por xve (1774 intervenciones) el 15/11/2016 08:03:46
Perdona, lo entendi mal, entendi que tenia que empezar por un numero...

La solucion es tan sencilla como cambiar los valores del if...
1
2
3
4
5
6
7
var re=/[0-9]/;
if(valor[0].match(re))
{
	document.getElementById("area").innerHTML="NO puede empezar por un numero";
}else{
	document.getElementById("area").innerHTML=valor;
}

Al revisar valor[0], revisamos únicamente el primer carácter!!
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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 15/11/2016 11:13:27
Jeje, ya decia yo, pero bueno no pasa nada.
luego lo cambiare, aunque como yo lo cambie tambien me sirve, por cierto si te animas con el siguiente punto,
InputCodigo debe tener 13 números, ninguna letra (puedes utilizar una expresión regular para validar).
lo que no se como se puede poner los de los 13 numeros, si es ninguna letra ?seria asi? ^[a-z]

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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por jose (1 intervención) el 15/11/2016 12:47:16
Para validar que sena unicamente 13 numeros, puedes hacerlo así:
1
2
3
4
5
6
7
var re=/[0-9]{13}/;
if(valor.match(re))
{
	document.getElementById("area").innerHTML=valor;
}else{
	document.getElementById("area").innerHTML="Solo pueden ser 13 numeros";
}

Re recomiendo que revises un manual de expresiones regulares...
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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 15/11/2016 14:05:07
ok , gracias luego lo pruebo
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 kip

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por kip (86 intervenciones) el 15/11/2016 13:21:04
Hola, intenta con esto. usa test en lugar de match si solo estas verificando un patron en una cadena dada:

1
2
3
4
5
if (/\b\d{13}\b/.test(valor)) {
    document.getElementById("area").innerHTML = valor;
 } else {
    document.getElementById("area").innerHTML="Solo pueden ser 13 numeros";
}

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 15/11/2016 14:06:07
gracias, luego lo compruebo
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

Mostrar un mensaje en un textarea según el valor introducido en un input

Publicado por javier (29 intervenciones) el 15/11/2016 21:38:28
funciona perfectamente.
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