Valider un <select>

Bonjour je débute en js et j'ai encore quelques lacunes.
Mon but est de lancer une alert() lorsque je clique sur submit et que mon select par défaut est toujours choisi.

voila le code

<select name="benne" id="liste_benne" onchange="VerifListe();">
<option name="choicebenne" id="choice_benne" selected="selected" disabled="disabled" onsubmit="return verifbenne(this)">Choisir une benne...</option>
	<optgroup label="Camion 2 essieux">
		<option name="benne1" value="benne1">Benne 1.5m3</option>
		<option name="benne2" value="benne2">Benne 4m3</option>
		<option name="benne3" value="benne3">Benne 4.5m3</option>
		<option name="benne4" value="benne4">Benne 5m3</option>
		<option name="benne5" value="benne5">Benne 7m3</option>
	</optgroup>
	<optgroup label="Camion 3-4 essieux">
		<option name="benne6" value="benne6">Benne 10m3</option>
		<option name="benne7" value="benne7">Benne 35m3</option>
	</optgroup>
	</select>

function verifbenne(champ)
{
	if(champ.value == "Choisir une benne...")
	{
		return false;
		alert("test");
	}
	else
	{
		return true;
	}
}

Salut,

Quelques éléments d'explications:
- L'élément <option> n'a pas d'attribut name
- Le test que tu fais dans ta fonction javascript ne peut pas fonctionner car tu n'a pas mis de value à ta première option: cette option devrait donc définir une value pour que tu puisse la comparer (le texte à l'intérieur des balises <option></option> n'est pas la value).
- Le onsubmit s'applique sur un formulaire
- Il y a un moyen plus simple pour savoir si la première option est choisie, plutôt que de comparer sa valeur: utiliser selectedIndex.
- Evite de mettre un disabled sur l'option sélectionnée par défaut

Cela donnerait donc:

<form (...) onsubmit="return verifbenne();">
	<select name="benne" id="liste_benne" onchange="VerifListe();">
		<option selected="selected">Choisir une benne...</option>
		<optgroup label="Camion 2 essieux">
			<option value="benne1">Benne 1.5m3</option>
			<option value="benne2">Benne 4m3</option>
			<option value="benne3">Benne 4.5m3</option>
			<option value="benne4">Benne 5m3</option>
			<option value="benne5">Benne 7m3</option>
		</optgroup>
		<optgroup label="Camion 3-4 essieux">
			<option value="benne6">Benne 10m3</option>
			<option value="benne7">Benne 35m3</option>
		</optgroup>
	</select>
</form>

function verifbenne()
{
	var champ = document.getElementById("liste_benne");	
	if(champ.selectedIndex == 0)
	{
		// Il faut alerter avant de retourner la valeur
		alert("test");
		return false;
	}
	else
	{
		return true;
	}
}

Modifié par jiber2fr (08 Jan 2013 - 20:06)

Tu préfères pas un console.log(); en lieu et place du alert(); ? C'est beaucoup moins intrusif.

Si c'est pour afficher à l'utilisateur final de sa page, le console.log ne convient pas.

Mais il y a en effet de meilleures possibilités que alert(), par exemple:
- Changer la couleur de la liste déroulante
- Afficher un message d'erreur dans la page elle-même (n'obligeant pas à cliquer sur OK)
-...

Merci pour le coup de main.
J'ai juste fait une erreur au niveau de l'alerte comme vous l'aviez dit jiber2fr.