[SOLUCIONADO] Problemas para añadir attributo

[rostein]

Buenas tardes,

Mirad, tengo el siguiente problema. Estoy haciendo un formulario de login y quiero validarlo con Javascript y Tooltip de jqueryui. Lo que quiero es que cuando alguno de los campos esté vacío salga un mesaje tooltip.

La cuestión es que tooltip lee el "title" de los inputs. Pues bien, he creado una función con un if para la validación en la cual quiero añadir el atributo "title" a un input. No obstante, no lo consigo. Os dejo el código para ver si me podéis echar una mano. Gracias.

Código:

function validar(){
n=document.registro.user.value;
if(n==""){
	document.getElementById('user').setAttribute('title', 'No has introducido ningún nombre');
	document.registro.user.focus();
	}
	}
    </script>

Código HTML:

<form id="registro" name="registro" method="post" >
  <p>
    <label></label>
    <input type="text" name="user" id="user" accesskey="u" tabindex="1" placeholder="Usuario">
    <br>
    <label for="pass"></label>
    <input type="text" name="pass" id="pass" accesskey="p" tabindex="2" placeholder="Constrase&ntilde;a">
  </p>
  <p>
    <input type="submit" name="loginbutton" id="loginbutton" value="Enviar" accesskey="l" tabindex="3" onClick="validar()">
    <br>
  </p>
</form> 

[dreamkarkayu]

Hola!!

No te funciona porque estas usando un boton tipo SUBMIT y, por tanto, tras ejecutarse la función validar(), el formulario hace el submit y se recarga (puesto que no se envia a ningún lado). Al recargarse te resetea los elementos y por eso no ves reflejado el cambio.

Cambia el tipo de boton a BUTTON. Es decir:

<input type="button" name="loginbutton" id="loginbutton" value="Enviar" accesskey="l" tabindex="3" onClick="validar()">

Con eso ya te funciona.

Por otro lado, tienes algunos fallos en el codigo como el usar la notación 'punto' para acceder a elementos del formulario (no es una buena practica) o no comprabar si de verdad el input usuario esta vacío (si pones n=="" un usuario puede llenar ese campo de espacios en blanco y lo das por bueno).

Te coloco lo que yo haría por si te sirve

function validar(){
var campo = document.getElementById('user');

if (( campo.value == null || campo.value.length == 0 ||
/^\s+$/.test(campo.value) )) {

campo.setAttribute('title', 'No has introducido ning&uacute;n nombre');
campo.focus();
}
}

Un saludo!

[PHPeros]

Iniciado por dreamkarkayu

tienes algunos fallos en el codigo como el usar la notación 'punto' para acceder a elementos del formulario (no es una buena practica)

¿Seguro?

Comprobar si el valor del input es equivalente a null si que es un error

[Italico76]

Y por que razon no marcas con el atributo required esos campos ?

<input type="text" name="user" id="user" accesskey="u" tabindex="1" placeholder="Usuario" required>

[Italico76]

Es con .title y no setAttribute()

Código Javascript:

elem.title = 'El campo esta vacio!';
 

Te hice unos cambios....... ahora los marcas con la clase "required" ...y te hice requeridos a los 2 campos:

Código Javascript:

<form action="http://www.lalala.com" id="registro" name="registro" method="post" onsubmit="return validar()" >
  <p>
    <label></label>
    <input type="text" name="user" id="user" accesskey="u" tabindex="1" placeholder="Usuario" class="required" />
    <br>
    <label for="pass"></label>
    <input type="text" name="pass" id="pass" accesskey="p" tabindex="2" placeholder="Constrase&ntilde;a" class="required" />
  </p>
  <p>
    <input type="submit" name="loginbutton" id="loginbutton" value="Enviar" accesskey="l" tabindex="3" >
    <br>
  </p>
</form> 
 
<script type="text/javascript">
 
function validar()
{
    elems = document.getElementsByClassName('required');
    
    for (i=0;i<elems.length;i++)        
        if (!elems[i].value)
        {   
            elems[i].title = 'El campo esta vacio!';            
            elems[i].focus();       
        
            return false; // evita se envie el formulario en caso de fallo
        }
        
    return true;
}
 
</script>
 

PD: se me fue doble post....... :(

[dreamkarkayu]

Iniciado por PHPeros

¿Seguro?

Comprobar si el valor del input es equivalente a null si que es un error

Pues no tenia ni idea. ¿Por qué es un error?

[Italico76]

Iniciado por dreamkarkayu

Pues no tenia ni idea. ¿Por qué es un error?

Un campo puede estar vacio o 'undefined' pero tampoco nunca lo vi en "null"

[PHPeros]

Como te dicen, el atributo required de HTML5 sería un buen sustituto a la validación por script.

Iniciado por dreamkarkayu

Pues no tenia ni idea. ¿Por qué es un error?

¿Y por qué no me dices tú por qué no es un error? ¿O realmente no sabes para qué haces esa comparación?

PD: Si el atributo value existe (cosa que es siempre en los inputs), no puede ser undefined.

[dreamkarkayu]

Iniciado por PHPeros

¿Y por qué no me dices tú por qué no es un error? ¿O realmente no sabes para qué haces esa comparación?

PD: Si el atributo value existe (cosa que es siempre en los inputs), no puede ser undefined.

Hasta donde yo se, .value es una propiedad del elemento input y como tal, null es un valor totalmente válido para asignar a una propiedad.

¿Que el 99% de los casos no va a tomar nunca null? Totalmente de acuerdo. No va a ocurrir a no ser que se haga la asignacion de forma explicita.
Pero poder, se puede. Es totalmente 'legal' hacerlo (tenga mas o menos sentido) y como he tenido que lidiar varias veces con código donde se ha hecho así, prefiero añadir esa comparacion.

Como digo, hablo bajo mi experiencia y no pretendo imponer nada. Al contrario, si estoy equivocado, dime el motivo y así aprendo yo tambien.

De eso se trata el foro, no?

[PHPeros]

Iniciado por dreamkarkayu

Hasta donde yo se, .value es una propiedad del elemento input y como tal, null es un valor totalmente válido para asignar a una propiedad.

¿Que el 99% de los casos no va a tomar nunca null? Totalmente de acuerdo. No va a ocurrir a no ser que se haga la asignacion de forma explicita.
Pero poder, se puede. Es totalmente 'legal' hacerlo (tenga mas o menos sentido) y como he tenido que lidiar varias veces con código donde se ha hecho así, prefiero añadir esa comparacion.

Como digo, hablo bajo mi experiencia y no pretendo imponer nada. Al contrario, si estoy equivocado, dime el motivo y así aprendo yo tambien.

De eso se trata el foro, no?

¿Realmente has probado a hacerlo de forma explícita? Desde luego a mí no me funciona.

Razón en parte tienes: puedes establecer cualquier tipo de valor, pero otra cosa es lo que JavaScript interprete.

[dreamkarkayu]

Iniciado por PHPeros

¿Realmente has probado a hacerlo de forma explícita? Desde luego a mí no me funciona.

Razón en parte tienes: puedes establecer cualquier tipo de valor, pero otra cosa es lo que JavaScript interprete.

Sí, he probado a hacerlo de forma explícita. ¿que no te funciona exactamente?
¿Te refieres a que javascript transforma el valor null en otro (cadena vacía)?

¿Que es absurdo hacer la comprobación? Totalmente de acuerdo. ¿Que esa comprobación es un error? Pues aún no se por que.

¿Me lo dices ya?

[PHPeros]

Iniciado por dreamkarkayu

¿Te refieres a que javascript transforma el valor null en otro (cadena vacía)?

Sí, es eso lo que intentaba decirte en el mensaje anterior... Pero a lo que voy es:

Iniciado por dreamkarkayu

¿Que el 99% de los casos no va a tomar nunca null? Totalmente de acuerdo.

Si sabes darme un ejemplo en el que el valor del input sea equivalente a null, tú ganas la batalla

[dreamkarkayu]

Iniciado por PHPeros

Sí, es eso lo que intentaba decirte en el mensaje anterior... Pero a lo que voy es:



Si sabes darme un ejemplo en el que el valor del input sea equivalente a null, tú ganas la batalla

Tio, esto no es ninguna batalla. Aqui estamos todos para aprender
Yo opino algo y te doy mis razones. Tu me dices que es un error pero no me dices porqué.

Vuelvo a repetir que si, que puede ser absurdo hacer esa comprobación, pero de ser absurdo a error, creo que hay un abismo, no??
El navegador no da error y la documentación oficial no indica que sea error (null es un valor totalmente válido para una propiedad). Ni tan siquiera es desperdicio de recursos porque esa comparación no supone apenas nada para el navegador (compara una propiedad con un valor constante).

Aparte, ten encuenta que muchos de los que programamos en Javascript ahora venimos de lenguajes fuertemente tipados (Java,C,C++...) y ese tipo de comprabaciones nunca están de más (si has programado punteros en C sabrás de lo que hablo ). Es por eso que cuando dijiste que era un error me interesé mucho por el motivo.

Poco más puedo aportar al tema. Si me comentas porque es un error a lo mejor podremos seguir teniendo esta interesante conversación. Si no, creo que es un poco absurdo darle vueltas a lo mismo.

EDITO:

En cuanto a esto:

Iniciado por dreamkarkayu

¿Que el 99% de los casos no va a tomar nunca null? Totalmente de acuerdo.

Como sigo diciendo en el mensaje, me refiero a si alguien hace algo como:

Código:

objeto.value = null;

que es algo que he visto varias veces en códigos de terceros.

Supongo que si si no se ha entendido así es fallo mio por no haberme explicado bien. Aunque creo que en los siguientes mensajes lo dejo más claro.

Un saludo!