Control errores

Alejandr4 · #1 (**permalink**) 21/06/2007, 16:11

Hola a todos:

Necesito vuestra ayuda ya que no domino Javascript. Tengo un código par validar un formulario, si no escriben por lo menos 4 digitos (tanto letra como numero) quiero que de error, eso ya lo hace pero quiesiera saber como podría hacer que una vez que da el error le ponga un asterisco rojo al lado y como sería en vez de ponerle un asterisco rojo ponerlo de otro color, el campo a rellenar, es para dos paginas diferentes por eso necesito las dos formas.

He buscado en google pero no encuentro nada sobre eso, igual no pongo la palabra idonea, puede que tenga un termino específico.

Muchas gracias a todos

Alejandra

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function validar(formulario) {
if (formulario.nombre.value.length < 4) {
alert("Escriba por lo menos 4 caracteres en el campo \"Nombre\".");
formulario.nombre.focus();
return (false);

}
}
</script>
</head>
<body>
<form method = "GET" name = "registro" action="algo.asp" onsubmit="return validar(this)">
<input type="text" size="20" name="nombre" >
<input type="submit" value="Enviar datos" name="enviar">
</form>
</body>
</html>

#2 (**permalink**) 22/06/2007, 15:08

Hola Alejandr4, primero, no te olvides de encerrar tus codigos entre [php] y [/php] en el caso de codigo php, y [html] y [/html] para codigos html, asi facilitas la lectura de los mismos.

Aunque mi fuerte no es el javascript, he modificado un poco tu funcion, y quedo asi:

Código:

function validar(formulario) {
    if (formulario.nombre.value.length < 4) {
        alert("Escriba por lo menos 4 caracteres en el campo \"Nombre\".");
 
        formulario.nombre.style.backgroundColor = '#D4FFD4';
        document.getElementById('label_for_nombre').innerHTML = '<font color="#ff0000"><b></b></font> ';
 
        formulario.nombre.focus();
        return (false);
    }
}

Como ves le agregue dos lineas antes del formulario.nombre.focus();, la primera es:

Código HTML:

formulario.nombre.style.backgroundColor = '#D4FFD4';

Eso hara que el color de fondo del input con nombre 'nombre' cambie de color a #D4FFD4

La segunda linea:

Código HTML:

document.getElementById('label_for_nombre').innerHTML = '<font color="#ff0000"><b>*Completar</b></font>';

lo que hace es buscar en el documento (document) un objeto con id 'label_for_nombre' (getElementById('label_for_nombre')), y le insertara un contenido HTML (innerHTML), que en este caso es '<font color="#ff0000"><b>* Completar</b></font>', osea * Completar
Pero para que funcione, debe haber un elemento con id 'label_for_nombre', asi que antes del input, o en donde deseas que aparezca el asterisco, colocaras:

Código HTML:

<span id="label_for_nombre"></span>

Al final, tu codigo me quedo asi:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript">
    function validar(formulario) {
        if (formulario.nombre.value.length < 4) {
            alert("Escriba por lo menos 4 caracteres en el campo \"Nombre\".");
 
            formulario.nombre.style.backgroundColor = '#D4FFD4';
            document.getElementById('label_for_nombre').innerHTML = '<font color="#ff0000"><b>* Completar</b></font> ';
 
            formulario.nombre.focus();
            return (false);
        }
    }
    </script>
</head>
<body>
    <form method = "GET" name = "registro" action="algo.asp" onsubmit="return validar(this)">
        <span id="label_for_nombre"></span><input type="text" size="20" name="nombre" id="nombre">
        <input type="submit" value="Enviar datos" name="enviar">
    </form>
</body>
</html>

Un saludo,

#3 (**permalink**) 22/06/2007, 15:14

Date una vuelta por esta web:

http://www.comptechdoc.org/independe...javastyle.html

Ahi encontraras muchas cosas interesantes sobre los atributos de javascript para modificar estilos

Un saludo,

Alejandr4 · #4 (**permalink**) 22/06/2007, 15:17

Ayyyy mil gracias, me estaba volviendo loca por internet y lo único que encontraba eran códigos larguísimos, y sobretodo gracias por la explicación, así voy a prendiendo lo que hace y pudeo modificarlo a mi gusto.

Perdona por lo del código, estuve a punto de ponerlo entre [PHP] pero como era javascript pensé que la iba a liar, jejejeje!!

Gracias de nuevo, aprendo mucho contigo.

Un saludo

Alejandra