Cambiar los elmentos de un fórmulario

[vrael]

Estoy intentando hacer algo tán sencillo como cambiar el valor de la etiqueta class =" " de un formulario.

Hago esto y consigo leer su valor actual:

Código Javascript:

document.getElementById("formulario").elements[i].className
 

Hago esto para cambiar us valor, pero no funciona:

Código Javascript:

document.getElementById("formulario").elements[i].className = "elnombrequemedalagana";
 

¿Qué es lo que estoy haciendo mal?

[_cronos2]

¿Puedes postear el código entero?
Saludos (:

[vrael]

Tengo un formulario con: id="formulario"

Lo que quiero hacer es: Si cualquiera de los campos del formulario está vacío, validar formulario devuelve false y se cambia la clase del campo para mostrar con CSS los bordes del recuadro del campo en rojo.

Código Javascript:

function validar()
{
    var camposTexto = document.getElementById("formulario").elements;
    for(var i=0; i<camposTexto.length; i++)
        if ((camposTexto[i].type == 'text' || camposTexto[i].type == 'password') && camposTexto[i].value == '')
        {
            document.getElementById("formulario").elements[i].className = "invalid";
            return false;
        }
    return true;
}
 

Ya digo que he probado a leer los valores de la etiqueta class y funcionaba, el problema está en la asignación.

[_cronos2]

Prueba a ponerle llaves ({}) al for.
Saludos :D

[omarMusic]

Tambien podrias colocar
camposTexto[i].className = "invalid";
en vez de
document.getElementById("formulario").elements[i].className = "invalid";

y ver si tus clases estan definidas correctamente y tambien el html, por q el js q pusiste esta correcto

Saludos!

[vrael]

Pues no, no lo consigo. Esto es muy raro.

Este es mi código en html, junto con javascript son los dos que tengo hechos:

Código HTML:

<form id="formulario" onSubmit="return validar();"  method ="POST">
        <table align="center" width="225" cellspacing="2" cellpadding="2" border="0">
            <tr>
                <td align="right">USER/EMAIL:</td>
                <td><input type="text" name="user_email" size ="20" maxlength="25" class="prueba"></td>
            </tr>
            <tr>
                <td align="right">PASSWORD:</td>
                <td><input type="password" name="pass" size ="20" maxlength="16" class="prueba"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" name="submit" id="submit" value="ENTRAR"></td>
            </tr>
        </table>      
        <input type="hidden" name="type" value="1">
    </form>
 

Es muy extraño, porque puedo leer los valores por un alert, pero no puedo cambiar su valor

[vrael]

Mmm... a ver, he detectado que SI que realiza la asignación, pero es extraño, porque acto seguido se borra.

Por 1 segundo cambia el estilo de los campos, pero inmediatamente después se vuelven a modificar las clases y se quedan como si no las hubiera modificado.

¿Alguna idea?

[ocp001a]

Las clases se deben cambiar con setAttribute:

document.getElementById("formulario").elements[i].setAttribute('className','invalid');

[_cronos2]

No tiene por qué, hay muchos atributos que sí se pueden usar directamente (id, name, className, action, value...), aunque haya alguno que requiere usar SetAttribute.
Saludos :D

[vrael]

Todo parece estar causado por: onSubmit="return validar();"
porque si utilizo: onMouseMove="return validar();" (sobre alguno de los campos)
la asignación se queda permanente y se mantiene el cambio de mi CSS.

[vrael]

vale a ver, me parece que ya lo tengo ¬¬

Es necesario pasar el formulario por parámetro en la función validar:

Código HTML:

onSubmit="return validar();"
 

Código Javascript:

function validar(f){f.elements[i].className="invalid";}