Ajouter une condition avant l'envoi

**javatwister** · 25/10/2020, 21h11

Ceci devrait suffire, vu ce que tu proposes:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">    
<style>
     #cache {display:none}
</style>
</head>
<body>
	<form id="f" action="">
		<hr />
		<div>(nom)</div>
		<label>Votre nom <input type="text" name="nom" /></label><br />
		<hr />
		<div>(choix)</div>
		<label><input type="radio" name="choix" value="un" />poste be</label><br />
 		<label><input type="radio" name="choix" value="deux" />kiala be</label><br />
		<label><input type="radio" name="choix" value="trois" />poste fr</label><br />
		<label><input type="radio" name="choix" value="quatre" />mondial relay fr</label><br />
		<hr />
		<div id="cache">
			<hr />
			<div>(cache)</div>
			<label>pierre <input type="text" name="pierre" /></label><br />
			<label>feuille <input type="text" name="feuille" /></label><br />
			<label>ciseau <input type="text" name="ciseau" /></label><br />
		</div>
		<hr />
 		<input type="submit" />
	</form>
 
 
<script>
 
document.querySelector("#f").addEventListener("submit",(e)=>{
        const check={
                nom : /[a-z]{2,}/i.test(e.target.nom.value),
        choix : Array.from(e.target.choix).some(v=>v.checked),
        cache : Array.from(document.querySelectorAll("#cache input")).every(v=>/[a-z]{2,}/i.test(v.value)),
        };
    for(i in check){
                if(!check[i]){
                        e.preventDefault();
                        alert(`Le champ ${i} est mal renseigné.`);
                        return false;
                }
        }
        alert("Tout est OK.");
})
 
document.querySelectorAll("input[name='choix']").forEach(v=>{
        v.addEventListener("click",()=>{
                document.querySelector("#cache").style.display="block";
        })
})
 
</script>
 
</body>
</html>

http://javatwist.imingo.net/validons.htm

**flexi2202** · 25/10/2020, 23h25

bonsoir
un grand merci pour le code
mais cela ne corresponds plus a mon attende
en effet si le client choisit par poste il ne devra pas rentrer les même infos que si cela est par kiala ou mondial relay

**javatwister** · 26/10/2020, 08h50

Ok => Maj: http://javatwist.imingo.net/validons.htm

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">    
 
<style>
.hide {display:none}
</style>
</head>
<body>
	<form id="f" action="">
		<div>
		<hr />
		<div>(nom)</div>
		<label>Votre nom <input type="text" name="nom" /></label><br />
		<hr />
		<div>(choix)</div>
		<label><input type="radio" name="choix" value="poste be" />poste be</label><br />
 		<label><input type="radio" name="choix" value="kiala be" />kiala be</label><br />
		<label><input type="radio" name="choix" value="poste fr" />poste fr</label><br />
		<label><input type="radio" name="choix" value="mondial relay fr" />mondial relay fr</label><br />
		<hr />
		<div class="hide" id="cache0">
			<hr />
			<div>(renseignements poste be)</div>
			<label>pierre <input type="text" name="pierre" /></label><br />
			<label>feuille <input type="text" name="feuille" /></label><br />
			<label>ciseau <input type="text" name="ciseau" /></label><br />
			<label>oiseau <input type="text" name="oiseau" /></label><br />
		</div>
		<div class="hide" id="cache1">
			<hr />
			<div>(renseignements kiala be)</div>
			<label>pierre <input type="text" name="pierre" /></label><br />
			<label>feuille <input type="text" name="feuille" /></label><br />
			<label>ciseau <input type="text" name="ciseau" /></label><br />
		</div>
		<div class="hide" id="cache2">
			<hr />
			<div>(renseignements poste fr)</div>
			<label>pierre <input type="text" name="pierre" /></label><br />
			<label>feuille <input type="text" name="feuille" /></label><br />
			<label>ciseau <input type="text" name="ciseau" /></label><br />
			<label>marteau <input type="text" name="marteau" /></label><br />
		</div>
		<div class="hide" id="cache3">
			<hr />
			<div>(renseignements mondial relay fr)</div>
			<label>pierre <input type="text" name="pierre" /></label><br />
			<label>feuille <input type="text" name="feuille" /></label><br />
		</div>
		<hr />
 		<input type="submit" />
		</div>
	</form>
 
 
<script>
 
document.querySelector("#f").addEventListener("submit",(e)=>{
        const check={
                nom : /[a-z]{2,}/i.test(e.target.nom.value),
        choix : Array.from(e.target.choix).some(v=>v.checked),
        cache : Array.from(document.querySelectorAll("#cache input")).every(v=>/[a-z]{2,}/i.test(v.value)),
        };
    for(i in check){
                if(!check[i]){
                        e.preventDefault();
                        alert(`Le champ ${i} est mal renseigné.`);
                        return false;
                }
        }
        alert("Tout est OK.");
})
 
document.querySelectorAll("input[name='choix']").forEach((v,i)=>{
        v.addEventListener("click",()=>{
                document.querySelectorAll(".hide").forEach(v2=>{
                        v2.style.display="none"
                });
                document.querySelector("#cache"+i).style.display="block";
        })
})
 
</script>
 
</body>
</html>

Reste à affiner tes tests de saisie sur les champs texte en fonction de ce que tu veux;

**flexi2202** · 26/10/2020, 08h54

bonjour
ah cette fois cela fonctionne a merveille
encore un tout tres grand merci

je vais essayer de l insérer dans mon bon de commande a présent

bonne journee

**javatwister** · 26/10/2020, 09h11

Non, problème de nommage des sections cachées: je vais changer ça pour que le test ait bien lieu...

**javatwister** · 26/10/2020, 09h37

Alors, tu vas ajouter une class .vu

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.hide {display:none}
.vu {display:block}

Le 3e élément de l'objet check est un peu modifié

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
const check={
		nom : /[a-z]{2,}/i.test(e.target.nom.value),
        choix : Array.from(e.target.choix).some(v=>v.checked),
        renseignements : Array.from(document.querySelectorAll(".vu input")).every(v=>/[a-z]{2,}/i.test(v.value)),
	};

ainsi que le gestionnaire des boutons

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
document.querySelectorAll("input[name='choix']").forEach((v,i)=>{
	v.addEventListener("click",()=>{
		document.querySelectorAll("div[id^=cache]").forEach(v2=>{
			v2.classList.replace("vu","hide");
		});
		document.querySelector("#cache"+i).classList.replace("hide","vu");
	})
})

(voir lien précédent)

**flexi2202** · 26/10/2020, 09h50

ah super
cela semble fonctionner a merveille
un tout très grand merci pour cette aide
je vais essayer d intégrer tout cela dans le bon de commande
bonne journée

**javatwister** · 26/10/2020, 11h09

pense aussi à donner un name unique à chaque input caché, histoire que la récupération serveur ne pose pas problème;

**flexi2202** · 27/10/2020, 14h49

oui oui je regarde cela un peu plus tard
encore un tout tres grand merci

Ajouter une condition avant l'envoi

JavaScript

Discussions similaires

Partager

Partager