Ayuda validar un Select multiple con Javascript

NetLethal · 25 Ene 2012

Amigos solicito de su ayuda, tengo el siguiente codigo para mi formulario:

Código:

<form method="post" id="customForm" action="">

<div>
<label for="industry">Industria</label>
<select id="industry" name="industry">
<option value="ninguno"selected="selected">Selecciona tu industria</option>
<option value="industria1">Industria 1</option>
<option value="industria2">Industria 2</option>
<option value="industria3">Industria 3</option>
<option value="industria4">Industria 4</option>
</select>
<span id="industryInfo">¿En cuál Industria te encuentras?</span>
</div> 

<div>
<input id="send" name="Send" type="submit" value="Enviar" />
</div>
</form>

y para validarlo en Java script lo estoy haciendo de esta manera pero no me funciona:

Código:

//On Submitting
form.submit(function(){
if(validateIndustry())

return true;
else
return false;
});

function validateIndustry()
{
if (document.customForm.industry.selectedIndex==0){ 
industry.addClass("error"); 
industrInfo.text("debes seleccionar una industria.");
industryInfo.addClass("error");
return false; 
} 

else{
industry.removeClass("error");
industryInfo.text("Debes seleccionar una industria.");
industryInfo.removeClass("error");
return true;
}
}




});

Que coño estoy haciendo mal o como seria el codigo de verdad que estoy muy perdido, muchas gracias a quien me pueda ayudar.

NL

omega96 · 25 Ene 2012

hola pues no se donde sacaste este codigo por que la verdad no creo que lo hayas hecho pero bueno yo te pongo un ejemplo de como hacerlo con el framework jquery

este es el codigo te marco lo importante

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor{
padding: 10px;
margin-right: auto;
margin-left: auto;
width:300px;
}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){//capturo el id del boton para enviar el formulario y le asigno el vento click
if($("#industry").attr("value")=="ninguno"){//comparo si el valor es igual de "ninguno"
$("#contenedor").css("background-color","red");//si es asi le cambio el color de fondo al div contenedor a rojo
$("#industryInfo").html("Debes seleccionar una industria."); //imprimo en el span la leyenda que quieres
}else{//de lo contrario si el valor del combo es diferente de "ninguno"
$("#customForm").submit();//envio el formulario
}
});
})//cierre de la funcion jquery
</script>
</head>

<body>
<form method="post" id="customForm" action="algo.php">

<div id="contenedor">
<label for="industry">Industria</label>
<select id="industry" name="industry">
<option value="ninguno"selected="selected">Selecciona tu industria</option>
<option value="industria1">Industria 1</option>
<option value="industria2">Industria 2</option>
<option value="industria3">Industria 3</option>
<option value="industria4">Industria 4</option>
</select>
<br /><span id="industryInfo">¿En cuál Industria te encuentras?</span>

<br /><input id="send" type="button" value="Enviar" />
</div>
</form>
</body>
</html>

espero te sirva, saludos.:metal:

ademas te pongo la descarga con el codigo para que te ubiques mejor.
http://www.mediafire.com/?7v8y4w6a20elfwe

NetLethal · 26 Ene 2012

Genial Omega, muchas gracias por tu codigo lo voy a chekar. El codigo completo no es mio me encontre un codigo que funcionaba y lo empece a modificar a lo que requeria.

De momento ya encontre la solucion por mi mismo, hay cosas que omito porque bueno, colocar todo el codigo seria muy largo trato de colocar solo las partes importantes, aunque si alguien llegara a necesitarlo con gusto se los paso todo el codigo.... solo envienme un MP.

Aqui dejo el codigo de la funcion con que logre que trabajara mi codigo.

Código:

 function validateIndustry(){
                        indice = document.getElementById("industry").selectedIndex; 
                        if( indice == null || indice == 0 ) {
                        //son mis clases personalizadas para mostrar el error o quitarlo.
                        industry.addClass("error");
			industryInfo.text("Debes seleccionar una industria.");
			industryInfo.addClass("error");
			return false;
                        }
                        else{
			industry.removeClass("error");
			industryInfo.text("Todo bien.");
			industryInfo.removeClass("error");
			return true;
		        }
     }

y el codigo resumido de mi formulario es :

Código:

<form method="post" id="customForm" name="customForm" action="">
<div>
                                <label for="industry">Industria</label>
                                <select id="industry" name="industry">
                                <option value="">Selecciona tu industria</option>
				<option value="industria1">Industria 1</option>
                                <option value="industria2">Industria 2</option>
                                <option value="industria3">Industria 3</option>
                                <option value="industria4">Industria 4</option>
                                <option value="industria5">Industria 5</option>
                                <option value="otros">Otros</option>
                                </select>
                                <span id="industryInfo">¿En cuál Industria te encuentras?</span>
		        </div>		




                        <div>
				<input id="send" name="Send" type="submit" value="send" />
			</div>
</form>

Espero les funcione igual que a mi.

NL

pd: Si alguien algún día necesita ampliar mas la información, con gusto les paso todo el código no pasa nada, solo escríbanme un mp.

Hola!

Ayuda validar un Select multiple con Javascript

NetLethal

Bovino adicto

omega96

Bovino de alcurnia

NetLethal

Bovino adicto