Una y no más SantoDOM

[donfalcone]

Hola a tod@s!

Tengo una función JavaScript que crea un <p> mediante DOM cuando se cumple una determinada condición.

Traducido al cristiano sería, mediante JS y DOM escribo una línea de texto que dice "E-mail no válido" cuando el usuario introduce una dirección que no puede ser válida.

El tema es, no sé como hacerlo para que esa línea "E-mail no válido" sólo se escriba una vez. Ya que cada vez que doy a submit, llama de nuevo a la función y escribe de nuevo la dicha frase.

Este es el código, por si no me he explicado con demasiado claridad (algo altamente probable):
Función que escribe el mensaje "email no válido";

Código PHP:

  function reafirma(){
var r = document.createElement("p");
var text = document.createTextNode("Email no válido");
r.appendChild(text);
r.style.color = 'red';
r.style.fontWeight = 'bold';
var ant = document.body.getElementsByTagName("p")[0];
ant.parentNode.insertBefore(r,ant);
} 
   

Aunque supongo que donde habrá que cambiar algo será en la función que se llama cuando se envia el formulario, que en este caso, es ésta:

Código PHP:

  function v(s) {
 
var email = s.email.value;
var pass = s.password.value;
 
var valid1 = /(@.*@)|(..)|(@.)|(.@)|(^.)/;
var valid2 = /^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/;
 
if (valid1.test(email) | !valid2.test(email)) {
reafirma();
return false;
} 
   

Gracias y saludos!

[caricatos]

Hola:

Una falta gravísima:

ant.parentNode.insertBefore(r,ant);

No puedes insertar antes del nodo ant desde el padre de ant... podrías insertar antes de cualquier hijo de ant...

ant.parentNode.insertBefore(r,ant.firstChild);

Esa línea inserta el nodo "r" como primer "hijo" del nodo "ant"

No me he fijado en el resto, pero creo que primero deberías revisar eso.

Saludos

[donfalcone]

Hola Caricatos,

Gracias por tu observación.
Pero curiosamente, este código me da error

Código HTML:

ant.parentNode.insertBefore(r,ant.firstChild);

mientras este:

Código HTML:

ant.parentNode.insertBefore(r,ant);

??? ups, la dimensión DOM me sobrepasa,....

Gracias por la ayuda
Saludos!

[venkman]

El código funciona bien, lo que pasa es que está haciendo exactamente lo que tú le has dicho. Es decir, en ningún sitio pones que se quite el nodo.

La función reafirma() crea un nodo <p> nuevo y lo inserta. Si la vuelves a llamar, pues crea otro y lo inserta. si lo llamas otra, pues otro nodo más. Pero en ningún sitio estás borrando los nodos.


Una forma de hacerlo bien es:

1. Bajo el campo email, junto al campo email, sobre el campo email, donde sea, pones un div invisible con el contenido ya como quieres que aparezca. p.ej.:

Código HTML:

<input id="email" ... />
<div id="errorEmail" style="visibility:none; color: red; weight: bold; font-size: 70%">Email no válido</div> 

2. En lugar de crear el nodo, lo único que haces es mostrarlo:

Código:

document.getElementById("errorMail").style.visibility = "block";

3. Pero si está bien, lo escondes:

Código:

document.getElementById("errorMail").style.visibility = "none";

Otra opción, si quieres crear el nodo como lo estás haciendo:
1. Lo dejas como lo tienes, pero al principio de la función de validación, eliminas el nodo usando elemento.removeChild(hijoABorrar).

O también puedes, tener un nodo vacío desde el principio, y hacer un replaceChild(nodoNuevo, nodoViejo) para sustituir el nodo en lugar de insertarlo nuevo.





Eso sí, lo hagas como lo hagas, yo que tú no usaría referencias como... document.body.getElementsByTagName("p")[0]. Si quieres buscar un sitio concreto donde insertar un aviso así, mete en el HTML un contenedor identificado con un id concreto y búscalo con getElementById("errores"). ¿Por qué? Porque ¿qué ocurrirá cuando luego modifiques tu página y metas otro párrafo al principio? que el aviso saldrá en otro lado.

Básicamente estás diciendo "dame el primer <p> que encuentres" pero eso puede variar más fácilmente que si dices "dame el <p> (o el <div> o el <span> o lo que sea) que se llame errores". Si le das un nombre, y luego lo buscas con ese nombre, siempre insertarás el aviso en ese elemento. Mientras que si buscas "el primer <p>" puede cambiar si luego añades otros párrafos.

[donfalcone]

Hola Venkman,

gracias por tu completa respuesta. Me pongo manos a la obra con lo que me comentas.

Saludos!

[donfalcone]

desesperación

Hola Venkman,

He adaptado el script gracias a tus comentarios, pero creo que no lo hago del todo bien,...

esto es lo que ahora tengo:

Código PHP:

  function reafirma(){
var r = document.createElement("p");
var text = document.createTextNode("Please, type a valid e-mail");
r.appendChild(text);
[B]r.id ='error1';[/B]
r.style.color = 'red';
r.style.fontWeight = 'bold';
[B]var ant = document.body.getElementsById("email");
document.insertBefore(r,ant);[/B]
} 
   

me debo dejar algo importante, porque no me inserta el <p> en ningún sitio.

Y esto creo que tampoco está correcto...

Código PHP:

  var valid1 = /(@.*@)|(..)|(@.)|(.@)|(^.)/;
var valid2 = /^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/;
 
if (valid1.test(email) | !valid2.test(email)) {
document.body.removeChild('error1');
reafirma();
return false;
} 
   

Gracias por tu ayuda, y disculpa mi torpeza. Estoy empezando con JS y DOM, y voy un poco pérdido.

Saludos!

[venkman]

La función es getElementById() y no getElementsById().

Porque por id sólo puede haber uno y por eso va en singular.

[donfalcone]

Ups! se coló esa s.

Pero al arreglarla sigue sin funcionar,...

y creo que lo pongo bien:

Código PHP:

  var ant = document.body.getElementById("mail");
document.body.insertBefore(r,ant); 
   

no sé que puede estar fallando.

Por otra parte, de momento he quitado el:

Código PHP:

  document.body.removeChild('error1') 
   

porque veo que no funciona.

?Sabes como podría hacerlo?

Gracias y saludos!

[venkman]

Podrías poner:
- el HTML
- el Javascript tal como lo tienes
- el error que te da o lo que ocurre

Gracias.

[donfalcone]

Pues mira el HTML tal como está:

Código PHP:

  <html>
<head>
<link rel="stylesheet" type="text/css" href="web.css" />
<script  type="text/javascript" src="fds.js"></script>
</head>

<body onload="document.getElementById('col').focus();">

<div id="login">
        <form id="cont" action="login.php" method="post" onsubmit="return v(this)">
        <h2>un heading del 2</h2>

        <p id="a">E-mail: <input id="col" type="text" name="email" value="" /></p>

        <p id="b">Password: <input id="col1" type="password" name="password" value="" /></p>
        <input type="checkbox" /><span class="remme">Remember me on this computer</span><br />
<br />

        <input class="boton" type="submit" value="Login" />

        </form>
</div>
</body>
</html> 
  

Y el archivo fds.js es este:

Código PHP:

  function v(s) {

var email = s.email.value;
var pass = s.password.value;

var valid1 = /(@.*@)|(..)|(@.)|(.@)|(^.)/;
var valid2 = /^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/;

if (valid1.test(email) | !valid2.test(email)) {
reafirma();
return false;
}
if(pass == null || pass.length == 0 || /^s+$/.test(pass)) {
reafirma2()
return false;
}
else {
return true;
}
}

function reafirma(){
var p = document.createElement("p");
var texto = document.createTextNode("Please, type a valid e-mail");
p.appendChild(texto);
var ant = document.getElementById('a');
document.body.insertBefore(p,ant);
}

function reafirma2(){
var p = document.createElement("p");
var texto = document.createTextNode("Please, type your password");
p.appendChild(texto);
var ant = document.getElementById('b');
document.body.insertBefore(p,ant);
} 
   

El error es que no se escribe los parrafos que deberían que anado con DOM:
Please, type a valid e-mail
y, Please, type your password

Muchas gracias por la ayuda!
Saludos!

[donfalcone]

Curiosamente, cuando intento ponerlo después, funciona.

Es decir, cuando....

Código PHP:

  function reafirma(){
var p = document.createElement("p");
var texto = document.createTextNode("Please, type a valid e-mail");
p.appendChild(texto);
var ant = document.getElementById('a');
ant.appendChild(p);
} 
   

la función funciona y se imprime en pantalla "Please, type a valid e-mail".

En cambio, cuando....

Código PHP:

  function reafirma(){
var p = document.createElement("p");
var texto = document.createTextNode("Please, type a valid e-mail");
p.appendChild(texto);
var ant = document.getElementById('a');
document.body.insertBefore(p,ant);
} 
   

no funciona.

?Sabes cuál puede ser el motivo?

[venkman]

No hagas esto:
document.body.insertBefore(p,ant);

Haz esto:
ant.parentNode.insertBefore(p,ant);

[donfalcone]

Oido cocina! Funcionó!

En lo de lograr que sólo se escriba una vez el mensaje, estoy optando por borrarlo cada vez que se escribe,... pero no me acaba de salir del todo.

Lo estoy haciendo así :

Código PHP:

  if (valid1.test(email) | !valid2.test(email)) {
reafirma();
borrar(error1);
return false;
} 
   

la función borrar sería así:

Código PHP:

  function borrar(id){
a = document.getElementById(id);
a.parentNode.removeChild(a);
} 
   

?sabes qué puede estar fallando?

Muchas gracias!

Prometo que está será mi última pregunta,... sobre este tema al menos. gracias por tu aclaraciones, me ha quedado algo más claro.

[caricatos]

Hola:

Creo que deberías entrecomillar el parámetro:

borrar("error1");

Saludos

[donfalcone]

Hola Caricatos,

gracias por tu respuesta. Funciona.

Ahora, lo que me pasa, es que no me aparece nunca el mensaje que yo quiero que aparezca cuando no ponen el e-mail.
Ya que destruyo el elemento cada vez que valido.

Te se ocurre alguna solución?

He pensado en un if del tipo:

if(getElementById('error1') != null){
borrar('error1');
}

Voy a ver si funciona y te comento!

PD: esto ha sido un poco en plan Juan Palomo, yo me lo guiso, yo me lo como. Pero me parece que a lo mejor le puede servir a alguién que mire los temas por curiosidad.

Saludos!

[venkman]

[--borrado--]

[donfalcone]

Pues, no funciona, ya que tras aparecer brevemente el mensaje deseado me redirige a la página a la que sólo se debería entrar con login.

Alternativas?


Saludos!

[donfalcone]

Perdón,
no mostré este código, si que le estoy poniendo id.

Código:

function reafirma(){
var p = document.createElement("p");
var texto = document.createTextNode("Please, type a valid e-mail");
p.appendChild(texto);
p.id = 'error1';
p.style.color = 'red';
p.style.fontWeight = 'bold';
var ant = document.getElementById('a');
ant.appendChild(p);
}

[donfalcone]

Solucionado!

Hola a tod@s!

El código que funciona:

Código PHP:

  if (valid1.test(email) | !valid2.test(email)) {
reafirma();
return false;
} 
   

Código PHP:

  function reafirma(){
var hay = document.getElementById('error1');
if(hay == null){
var p = document.createElement("p");
var texto = document.createTextNode("Please, type a valid e-mail");
p.appendChild(texto);
p.id = 'error1';
p.style.color = 'red';
p.style.fontWeight = 'bold';
var ant = document.getElementById('a');
ant.appendChild(p);
}} 
   

Gracias a Venkman y Caricatos por su ayuda!
Saludos!

[caricatos]

Hola:

Creo que en alguna respuesta no estuve del todo atinado, pero espero que en alguna otra realmente te haya ayudado... de todos modos, lo importante (lo realmente importante) es que el tema esté resuelto.

Saludos