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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
#cache1, #cache2, #cache3, #cache4 {display:none}
</style>
</head>
<body>
<form id="f" action="">
<hr />
<label>Votre nom <input type="text" name="nom" /></label><br />
<hr />
<label><input type="radio" name="choix1" value="un" />poste be</label><br />
<div id="cache1">
<hr />
<div>(cache 1)</div>
<label>pierre <input type="text" name="chiffre-nom" /></label><br />
<label>feuille <input type="text" name="chiffre-adresse" /></label><br />
<label>ciseau <input type="text" name="chiffre-ville" /></label><br />
</div>
<hr />
<label><input type="radio" name="choix2" value="un" />kiala be</label><br />
<div id="cache2">
<hr />
<div>(cache 2)</div>
<label>pierre <input type="text" name="lettre-nom" /></label><br />
<label>feuille <input type="text" name="lettre-adresse" /></label><br />
<label>ciseau <input type="text" name="lettre-ville" /></label><br />
</div>
<hr />
<label><input type="radio" name="choix3" value="un" />poste fr</label><br />
<div id="cache3">
<hr />
<div>(cache 3)</div>
<label>pierre <input type="text" name="lettre-nom" /></label><br />
<label>feuille <input type="text" name="lettre-adresse" /></label><br />
<label>ciseau <input type="text" name="lettre-ville" /></label><br />
</div>
<hr />
<label><input type="radio" name="choix4" value="un" />mondial relay fr</label><br />
<div id="cache4">
<hr />
<div>(cache 4)</div>
<label>pierre <input type="text" name="lettre-nom" /></label><br />
<label>feuille <input type="text" name="lettre-adresse" /></label><br />
<label>ciseau <input type="text" name="lettre-ville" /></label><br />
</div>
<input type="submit" />
</form>
<script>
document.querySelector("#f").addEventListener("submit",(e)=>{
const check={
nom : /[a-z]{2,}/i.test(e.target.nom.value),
choix1 : Array.from(e.target.choix1).some(v=>v.checked),
cache1 : Array.from(document.querySelectorAll("#cache1 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
choix2 : Array.from(e.target.choix2).some(v=>v.checked),
cache2 : Array.from(document.querySelectorAll("#cache2 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
choix3 : Array.from(e.target.choix3).some(v=>v.checked),
cache3 : Array.from(document.querySelectorAll("#cache3 input")).every(v=>/[a-z]{2,}/i.test(v.value)),
choix4 : Array.from(e.target.choix4).some(v=>v.checked),
cache4 : Array.from(document.querySelectorAll("#cache4 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='choix1']").forEach(v=>{
v.addEventListener("click",()=>{
document.querySelector("#cache1").style.display="block";
})
})
document.querySelectorAll("input[name='choix2']").forEach(v=>{
v.addEventListener("click",()=>{
document.querySelector("#cache2").style.display="block";
})
})
document.querySelectorAll("input[name='choix3']").forEach(v=>{
v.addEventListener("click",()=>{
document.querySelector("#cache3").style.display="block";
})
})
document.querySelectorAll("input[name='choix4']").forEach(v=>{
v.addEventListener("click",()=>{
document.querySelector("#cache4").style.display="block";
})
})
</script>
</body>
</html> |
Ajouter une condition avant l'envoi
Répondre avec citation
Partager