Champ required sur un champ "caché"

Version imprimable

Bonjour,

Pour l'instant j'ai ceci...
Mon but est que le champ text "precision_lieu" soit obligatoire si l'option "Autre" est choisie. Cependant, les 2 méthodes que j'ai testées ne fonctionnent pas...

Code:

1
2
3
4
5
6
7
8
9
10
<form action="" method="post" onsubmit="return validateForm()" name="formulaire">    <!-- onsubmit et name pour la méthode 2 -->
<select name="lieu" onchange="champLieu(this);">
    <option value="Lieu1">Lieu1</option>
    <option value="Lieu2">Lieu2</option>
    <option value="Autre">Autre</option>
</select>
          <div id="siAutre" style="display: none;">
            <label for="precision_lieu"></label> <input type="text" name="precision_lieu" id="idLieu" placeholder="Préciser"/>
          </div>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function champLieu(that) {
    if (that.value == "Autre") {
        document.getElementById("siAutre").style.display = "block";
	document.getElementById("idLieu").required = true;
    } else {
        document.getElementById("siAutre").style.display = "none";
	document.getElementById("idLieu").required = false;
    }
}
 
//méthode 2 (donc c'est soit l'une, soit l'autre, pas les 2 en même temps)
function validateForm() {
	if(document.getElementById("siOui").style.display == "block"){
		let x = document.forms["formulaire"]["precision_lieu"].value;
		if (x == "") {
			alert("Le champ 'Autre' doit être complété.");
			return false;
		}
	}
}

25/06/2021, 10h06
SpaceFrog

dans ton ton de select tu as

Code:

value="'Autre"

Mais dans ta fonction tu testes

Code:

that.value == "Autre"

Pas étonnant que cela ne passe jamais dans le if

Bonjour,

Malheureusement, le problème ne vient pas de là, j'ai juste mal renoté le code... Désolé

(Le vrai code est en php, pour simplifier les choses je l'ai mis en HTML ici, sinon ça donne ça : )
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <select name="lieu" onchange="champLieu(this);"> <?php $reqLieux = $bdd->prepare('SELECT * FROM lieux'); $reqLieux->execute(); while ($donnees = $reqLieux->fetch()) { echo '<option value="'.$donnees['libelle_lieu'].'">' . $donnees['libelle_lieu'] . '</option>'; } ?> </select>
Mais quand je regarde dans le code source de la page, j'ai bien

Code:

value="Autre"

25/06/2021, 17h33
tag9724

De ce que j'ai testé les deux méthodes fonctionnent très bien, enfin la seconde fonctionne quand on remplace le .getElementById("siOui") par .getElementById("siAutre").