No agrega atributo a tag

fjchavez · #1 (**permalink**) 09/06/2008, 15:25

Hola, estoy validando un formulario con jsvalidate y resulta que el select opc1 cuando se selecciona la opcion Otras hace aparecer automaticamente un textbox opc2, entonces cuando selecciono esta opcion quisiera que validara este textbox y bote un mensaje de error si no esta lleno, mientras que si esta oculto no lo valide.
Para esto estoy trabajando con setAttribute("class","jsrequired") o setAttribute("className","jsrequired") (segun el navegador), pero no logro que salga el error en pantalla cuando ese textbox se muestra.

He probado asi:

Código HTML:

<html>
<head>
	<script type="text/javascript" language="javascript" src="jsvalidate/scriptaculous/lib/prototype.js"></script>
	<script type="text/javascript" language="javascript" src="jsvalidate/scriptaculous/src/scriptaculous.js"></script>
	<script type="text/javascript" language="javascript" src="jsvalidate/jsvalidate.js"></script>
    <script language="javascript">
	function ver(obj)
	{
		if(obj.options[obj.selectedIndex].text == "Otras")
		{
		 document.formulario.opc2.style.visibility = "visible";
		 document.getElementById("newopc2").setAttribute("class", "jsrequired");
		 document.formulario.opc2.focus();
		}
		else
		{
		 document.formulario.opc2.style.visibility = "hidden";
		 document.getElementById("newopc2").removeAttribute("class");
		 document.formulario.opc2.value = "";
		 document.formulario.opc2.blur();
		}
	}
    </script>
</head>
<body>
<form name="formulario" method="POST">
 <table border=1 width="500">
	  <tr>
	    <td>Unidad</td>
	    <td>
	      <select name="opc1" onChange="ver(this);" class="jsrequired select-notfirst">
			<option value="" selected="selected">[Seleccione su Unidad]</option>
			<option value="UNAL">UNAL</option>
			<option value="UNIP">UNIP</option>
			<option value="Otros">Otras</option>
	      </select>
	    </td>
     <td><input id="newopc2" name="opc2" type="text" style="visibility:hidden" size="50"/></td>
  </tr>
  <tr>
    <td colspan="3" align="center">
    	<input name="leer" type="submit" value="Leer"/>
    	<input name="borrar" type="reset" value="Borrar" />
    </td>
  </tr>
 </table>
</form>
</body>
</html>

JavierB · #2 (**permalink**) 10/06/2008, 00:30

Hola

Prueba con esto, debería funcionar en todos los navegadores:

Código:

document.getElementById("newopc2").className = 'jsrequired';

Saludos,

caricatos · #3 (**permalink**) 10/06/2008, 00:45

Hola:

Siempre que tengas que tratar el atributo html class, debes usar con javascript className (la N mayúscula).

Nunca había visto removeAttribute, pero no creo que funcione con los atributos estándar... para quitarlo, tal vez sea mejor darle como valor la cadena vacía...

Código:

document.getElementById("newopc2").className = "jsrequired";

Saludos

caricatos · #4 (**permalink**) 10/06/2008, 00:46

Hola Javi... cuanto tiempo sin chocar

JavierB · #5 (**permalink**) 10/06/2008, 00:51

Hola caricatos, buen choque

No me había dado cuenta de que andabas por aquí, sino estaba claro que lo de className lo tenías que contestar tú

Saludos,

fjchavez · #6 (**permalink**) 10/06/2008, 11:53

weno gracias por su ayuda pero aun no me funciona que valide el textbox al enviar el formulario

, a que se podría deber???

caricatos · #7 (**permalink**) 10/06/2008, 22:18

Hola:

No veo que estés haciendo ninguna validación... la forma de validar un formulario es desde el evento submit, devolviendo false para anular el envío:

Código:

<form onsubmit="return validar(this)" ...>

...y...

function validar(f) {
if (f.opc1.value == "Otros") {
alert("debe rellenar el campo opc2")
return f.opc2.value != "";
}
}

Saludos

fjchavez · #8 (**permalink**) 11/06/2008, 11:18

Cita:

Iniciado por caricatos

Hola:

No veo que estés haciendo ninguna validación... la forma de validar un formulario es desde el evento submit, devolviendo false para anular el envío:

Código:

<form onsubmit="return validar(this)" ...>

...y...

function validar(f) {
if (f.opc1.value == "Otros") {
alert("debe rellenar el campo opc2")
return f.opc2.value != "";
}
}

Saludos

gracias por tu respuesta caricatos, pero estoy validando con jsvalidate una aplicacion ya hecha que me descargue de la web.
Pues lo que quiero es que agrege el nombre de la clase jsrequired que es la que valida, pero no logro que funcione.
He subido mi pagina de ejemplo para que tal ves sea mas ilustrativo.
Resulta que cuando ponga Otras en el segundo select aparezca el texbox y al enviar o pasar a otro campo salga el mensaje de que tiene que estar lleno...espero me puedas ayudar