Ajouter une condition avant l'envoi

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

bonjour a tous

j ai un formulaire bon de commande ou le client remplit ces coordonnées , elles sont vérifier avant l envois en javascript
donc cela fonctionne a merveille grâce a ce code (il ne vient pas de moi )
mais plus bas dans mon formulaire le client doit choisir entre 4 mode de livraison différentes
et un des trois mode de paiement
comment faire pour que le formulaire ne puisse pas partir si il a oublie de choisir un mode de livraison et un mode de paiement

merci pour l aide

Code :

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
function Verifie(aBC)
   {
   if(aBC.nom.value == ""){
        alert('Vous n\'avez pas renseign\351 votre nom.');
        return false;
   }else if(aBC.prenom.value == ""){
        alert('Vous n\'avez pas renseign\351 votre prenom.'); 
        return false;
   }else if(aBC.adresse.value == ""){
        alert('Vous n\'avez pas renseign\351 votre adresse,N°.'); 
        return false;
   }else if(aBC.code_postal.value == ""){
        alert('Vous n\'avez pas renseign\351 votre code postal.'); 	
        return false;
   }else if(aBC.ville.value == ""){
        alert('Vous n\'avez pas renseign\351 votre ville .'); 	
        return false;
   }else if(aBC.telephone.value == ""){
        alert('Vous n\'avez pas renseign\351 votre numero de telephone .'); 		
        return false;
   }else if(aBC.pays.value == ""){
        alert('Vous n\'avez pas renseign\351 votre pays.');
        return false;
   }else if(aBC.email.value == ""){
        alert('Vous n\'avez pas renseign\351 votre email.'); return false;
   }else{
     var regMail = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
     // var regCP = /^[0-9]{4}$/; //Vérif code postal benelux
     if(regMail.test(aBC.email.value))
	 {
		return true;
	 }else
	 {
        alert('Vous devez renseign\351 une adresse e-mail corecte.');
		return false;
	 }
 
     /*if(regCP.test(aBC.email.value)) ///////////Verif Code Postal Benelux
    {
        return true;
    }else
    {
        alert('Vous devez renseign\351 un Code postal correct !');
        document.ex.cp.focus();
        return false;
    }*/
   }
     }

**javatwister** · 22/10/2020, 10h09

Bonjour,

La validation d'un formulaire s'effectue grâce à un input submit et à un gestionnaire onsubmit affecté directement au formulaire;
La méthode preventDefault() doit également être affectée au formulaire pour signaler qu'une saisie (absence de saisie) est bloquante.

**flexi2202** · 22/10/2020, 10h22

bonjour

merci pour la réponse
je viens de regarder dans le code complet de javascript mais je ne trouve pas de preventDefault()
par contre dans le code html j ai bien les deux submit onsubmit

du coup comment faire ?

**javatwister** · 22/10/2020, 10h35

Il faudrait qu'on voie le formulaire (au moins les balises fermantes et le submit) et l'appel de fonction;

**flexi2202** · 22/10/2020, 10h52

merci pour l aide mais je tiens a rappeler que j ai fait ce formulaire en pure amateur et qu il fonctionne le seul soucis c est que je souhaiterais que le formulaire ne puisse pas être envoyé si le client ne choisit pas un des 4 modes de livraison
et mieux encore que si il choisit kiala ou mondial relay qu il doivent compléter les champs
Nom du point mondial relay
Localité du point mondial relay
Code postal du point mondial relay
et l adresse du point mondial relay

idem pour kiala si il choisit envois belgique par kiala

et qu il soit dans l obligation de choisir un des 3 modes de paiements

en fait le début du code onSubmit

Code html :

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

1
2
3
4
5
6
7
<tr width="45%"   >
                  <form id="F_COMMANDE" action="https://peche-a-la-perle.000webhostapp.com/peche/essai2perlecommande2.php" onSubmit="return Verifie(this)" method="post">
                     <img alt="" src="./image/top_bon_de_commande.jpg"width="803">
               </tr>
               <tr>
				<th width="45%" height="23" bgcolor=#EBE0EF align="center" colspan="5"><font color="noir">Veuillez entrer vos coordonnées </font></th>
               </tr>

et le morceau de code de fin avec le submit

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<li><a >Calcul des frais d envois</a></li>
<li class="toggleSubMenu1"><span>Pour la belgique</span>
<ul class="subMenu1">
<table "width="45%"border="2"align="center">
<thead>
<tr height="200">
<td width="10%"><img src="./image/bpost.jpeg" width="75" height="75"></td>
<td width="45%"colspan="3"><a><label for="by_poste"><input type="radio"  " id="by_poste" name="envoi" value="0" onclick="majPrixPort(this.form);"><font color="noir">Par la poste envoi par courrier non sécurisé ( je ne suis pas responsable des pertes éventuelle)
</font><br><br><font color="noir">Si moins de 4 paquets 1 euros <br><font color="red">(Si plus de 3 paquets GRATUIT)</font></font></label> </a>
</td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="10%"><img src="./image/kiala.jpeg" width="75" height="75"></td>
<td width="45%"colspan="3"><a><label for="by_kiala"><input type="radio" onclick="majPrixPort(this.form);" value="1" name="envoi" id="by_kiala"><font color="noir">Par kiala l envois est securisé et garanti</font><br><br><font color="noir">Si moins de 4 paquets alors 3 euros<br><font color="red">(Si plus de 3 paquets  alors 2 euros)</font></font></label></a></td>
<td width="30%"colspan="2"><a target="_blank" href="http://www.kiala.be/fr/locateandselect"><img src="./image/localisation_kiala.fw.png" width="200" height="62"> </a></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Nom du point kiala (ex librairie ...)</font></td>
<td width="30%"colspan="2"><input size="45" name="non_du_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Localite du point kiala</font></td>
<td width="30%"colspan="2"><input size="15" name="Localite_du_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Code postal du point kiala</font></td>
<td width="30%"colspan="2"><input size="15" name="code_postal_du_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Adresse du point kiala </font></td>
<td width="30%"colspan="2"><input size="45" name="adresse_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Point kiala (ex k0001)</font></td>
<td width="30%"colspan="2"><input value="K" size="5" name="point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
</tbody>
</table>
</ul>
</li>
<li class="toggleSubMenu1"><span>Pour la france</span>
<ul class="subMenu1">
<table "width="45%"border="2"align="center">
<tbody>
<tr>
<td width="10%"><img src="./image/postefrance.jpeg" width="75" height="75"></td>
<td width="45%"colspan="3"><label for="by_poste fr">     <input type="radio" onclick="majPrixPort(this.form);" value="2" name="envoi" id="by_poste fr"  "><font color="noir">Par la poste envoi par courrier non sécurisé ( je ne suis pas responsable des pertes éventuelle)</font><br><br><font color="noir">Si moins de 4 paquets 1 euros <font color="red">(Si plus de 3 paquets GRATUIT)</font></font></label></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="10%"><img src="./image/mondialrelay.jpeg" width="75" height="75"></td>
<td width="45%"colspan="3"><a><label for="by_poste france">     <input type="radio" onclick="majPrixPort(this.form);" value="2" name="envoi" id="by_poste france"  "><font color="noir">Par mondial relay, l'envoi est sécurisé et garanti</font><br><br><font color="noir">Si moins de 7 paquets 5 euros <font color="red">(Si plus de 6 paquets 7 euros)</font></font></label> </a></td>
<td width="30%"colspan="2"><img src="./image/localisation_kiala.fw.png" width="200" height="62"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color=" noir" =""="">Nom du point mondial relay (ex librairie ...)</font></td>
<td width="30%"colspan="2"><input size="45" name="non_du_point_mondial_relay"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Localite du point mondial relay</font></td>
<td width="30%"colspan="2"><input size="45" name="non_du_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Code postal du point mondial relay</font></td>
<td width="30%"colspan="2"><input size="15" name="code_postal_du_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Code postal du point mondial relay</font></td>
<td width="30%"colspan="2"><input size="45" name="adresse_point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="25%"colspan="2"><font color="noir">Adresse du point mondial relay </font></td>
<td width="30%"colspan="2"><input value="K" size="5" name="point_kiala"></td>
<td width="30%"colspan="2"></td>
<td width="15%"></td>
</tr>
</tbody>
</table>
</ul>
</li>
<li class="toggleSubMenu1"><span>Pour un autre pays</span>
<ul class="subMenu1">
<font color="noir"><a target="_blank" href="http://talon-aiguille.net46.net/formulaire.php"><b>Pour un autre pays envoyer moi un mail cliquez ici </b> </a></font>
</ul>
</li>
<li><a >
<table width="45%"border="2"align="center">
<thead>
<tbody>
<tr width="100%">
<td width="85%"  bgcolor="#FC0021" align="center" colspan="6"><font color="ffffff"><b>Sous total </b> </font></td>
<td width="15%" bgcolor="#ffffff" align="right"><font size="3">€</font><input type="text" size="7" name="MontantHorsPort"> </td>
</tr>
</tbody>
</thead>
</table>
</a></li>
 
 
 
<li><a ><table width="45%"border="2"align="center">
<tbody>
<thead>
<tr >
<td width="85%"  bgcolor="#FC0021" align="center" ><font color="ffffff"><b>frais de livraison </b> </font></td>
<td width="15%"  bgcolor="#ffffff" align="right"><font size="3">€</font><input type="text"  size="7" name="prix_port"></td>
</tr>
</thead>
</tbody>
</table></a></li>
<li><a >
<table width="45%"border="2"align="center">
<thead>
<tbody>
<tr >
<td width="85%"  bgcolor="#FC0021" align="center" colspan="6"><b><font size="3"><b> <font color="ffffff">Total a payer tva comprise</font></b></font></b></td>
<td width="15%" bgcolor="#ffffff" align="right"><font size="3">€</font> <input align="right" size="8" onchange="majPrixPort(this.form);" name="MontantTotal"></td>
</tr>
</tbody>
</thead>
</table>
</a></li>
<li><a ><table width="45%"border="2"align="center">
<tbody>
<tr width="100%">
<td width="100%"bgcolor="#6EC5EF" align="CENTER"colspan="5" ><b> <font size="4">Choississez votre méthode de paiement</font></b></td>
</tr>
<tr colspan="5">
<td colspan="1"align="center">  <img width="150" height="53" src="./image/777588-virement.jpg" alt=""></td>
<td colspan="2"align="center"><img width="150" height="53" src="./image/VisaMastercard-300x96.jpg" alt=""></td>
<td colspan="2"align="center"> <img width="150" height="75" src="./image/edfr.jpeg  " alt=""></td>
</tr>
<tr>
<td colspan="1"align="center">   <a><label for="by_virement"><input type="radio"  id="by_virement" name="paiement" value="virement" onclick="paiement(this.form);"></label> </a></td>
<td colspan="2"align="center"> <a ><label for="by_payapl"><input type="radio" onclick="paiement(this.form);" value="payapal" name="paiement" id="by_payapal" ></label> </a></td>
<td colspan="2"align="center"> <a ><label for="by_visa"><input type="radio" onclick="paiement(this.form);" value="visa" name="paiement" id="by_visa"></label></a></td>
</tr>
<tr>
<td width="100%" height="27" bgcolor=#ffffff align="center" colspan="5"><font color="noir">Remettre le bon de commande a 0</font><input type="reset" value="Reset"> <br><br><font color="noir">Recalculer le bon de commande</font><input type="button" value="Recalcul" onclick="majPrixPort(this.form);"> <!-- <INPUT TYPE="button" VALUE="Vérification"  ONCLICK="Verifie(this.form)">  --> </td></tr>
<TR>
<TD colspan="5"bgcolor= #f7dfff><center><font color="noir">Une question ou un commentaire ?</font></center></TD> 
</tr>
<TR>
<TD colspan="5" bgcolor=#ffffff>
<center><TEXTAREA rows="5" cols="60"name="commentaires">Poster votre question ou votre question ici</TEXTAREA></center>
</TD>
</TR>
</tbody>
</table></a></li>
<li><a > <input type="hidden" name="Poids1">
<input type="hidden" name="Poids2">
<input type="hidden" name="Poids3">
<input type="hidden" name="Poids4">
<input type="hidden" name="Poids5">
<input type="hidden" name="Poids6">
<input type="hidden" name="Poids7">
<input type="hidden" name="Poids8">
<input type="hidden" name="Poids9">
<input type="hidden" name="Poids10">
<input type="hidden" name="Poids11">
<input type="hidden" name="Poids12">
<input type="hidden" name="PoidsTotal">
<input type="submit" value="commander" name="sub"style="font-size:2.85em;background-color : red;color:white;">

**javatwister** · 22/10/2020, 11h31

ajoute des contrôles comme tes premiers mais en adaptant aux radio, notamment;

Par exemple, tu as des radio qui s'appellent "envoi";

Code javascript :

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

return Array.from(aBC.envoi).some(v=>v.checked);

Cette ligne renverra false si aucun radio n'est coché;

Ajouter une condition avant l'envoi

JavaScript

Vue hybride

Discussions similaires

Partager

Partager