comment ajouter une condition avant l envois

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
flexi2202
Messages : 8
Enregistré le : 21 oct. 2020, 08:56

comment ajouter une condition avant l envois

Message par flexi2202 » 21 oct. 2020, 12:09

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 : Tout sélectionner

 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;
    }*/
   }
     }

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: comment ajouter une condition avant l envois

Message par webmaster » 22 oct. 2020, 17:14

Bonjour,

Il faudrait le code HTML du formulaire pour adapter les controles de saisie.
Pour le moment il n'y a que des champs input text
Le choix des modes de paiement doit etre différent.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

flexi2202
Messages : 8
Enregistré le : 21 oct. 2020, 08:56

Re: comment ajouter une condition avant l envois

Message par flexi2202 » 22 oct. 2020, 23:21

bonsoir
un grand merci pour l aide et pour la reponse
voici donc la partie du formulaire qui traite les envois et les paiements
cela n a pas été confectionner dans les règles de art et surement avec des erreurs mais cela fonctionne
donc en très grand amateur
l idéal serait que le client soit oblige de choisir un moyen de livraison et que si il choisit kiala ou mondial relay qu il doive remplir aussi les coordonnées de ce livreur
et ensuite qu il soit oblige de choisir un mode de paiement

Code : Tout sélectionner

<HTML>
	<head>
		<title>A document with a short head</title>
	</head>
	<body>
		<table width="45%"border="2">
			<tr >
				<td colspan="7">
					<font color="red">calcul frais d envois</font>
				</td>
			</tr>
			<tr >
				<td colspan="7">
					<font color="red">calcul pour la belgique</font>
				</td>
			</tr>
			<tr >
				<td width="10%">
					<img src="./image/poste.jpeg" width="75"alt="" height="75">
				</td>
				<td width="45%"colspan="3">
					<label for="by_poste">
						<input type="radio"  id="by_poste" name="envoi" value="0" onclick="majPrixPort(this.form);">
							<font color="#000000" >Par la poste envoi par courrier non sécurisé ( je ne suis pas responsable des pertes éventuelle)
							</font>
							<br>
							<br>
							<font color="#000000">Si moins de 4 paquets 1 euros 
							<br>
							<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/kiala.jpeg" alt=""width="75" height="75">
				</td>
				<td width="45%"colspan="3">
					<label for="by_kiala">
						<input type="radio" onclick="majPrixPort(this.form);" value="1" name="envoi" id="by_kiala">
							<font color="#000000">Par kiala l envois est securisé et garanti</font>
							<br>
							<br>
							<font color="#000000">Si moins de 4 paquets alors 3 euros
							<br>
							<font color="red">(Si plus de 3 paquets  alors 2 euros)</font>
							<font>
					</label>
				</td>
				<td width="30%"colspan="2">
							<a target="_blank" href="http://www.kiala.be/fr/locateandselect">
							<img src="./image/localisation_kiala.fw.png" alt=""width="200" height="62">
							</a>
				</td>
				<td width="15%"></td>
			</tr>
			<tr>
				<td width="25%"colspan="2">
							<font color="#000000">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="#000000">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="#000000">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="#000000">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="#000000">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 >
				<td colspan="7">
							<font color="#FF0000">calucl pour la france</font>
				</td>
			</tr>
			<tr>
				<td width="10%">
							<img src="./image/postefrance.jpeg" alt=""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="#000000">Par la poste envoi par courrier non sécurisé ( je ne suis pas responsable des pertes éventuelle)</font>
							<br>
							<br>
							<font color="#000000">Si moins de 4 paquets 1 euros 
							<font color="#FF0000">(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" alt=""width="75" height="75">
				</td>
				<td width="45%"colspan="3">
							<label for="by_poste france">
							<input type="radio" onclick="majPrixPort(this.form);" value="2" name="envoi" id="by_poste-france">
							<font color="#000000">Par mondial relay, l'envoi est sécurisé et garanti</font>
							<br>
							<br>
							<font color="#000000">Si moins de 7 paquets 5 euros </font>
							<font color="#FF0000">(Si plus de 6 paquets 7 euros)</font>
							</font>
							</label>
				</td>
				<td width="30%"colspan="2">
							<img src="./image/localisation_kiala.fw.png"alt="" width="200" height="62">
				</td>
				<td width="15%">
				</td>
			</tr>
			<tr>
				<td width="25%"colspan="2">
							<font color="#000000" >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="#000000">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="#000000">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="#000000">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="#000000">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>
			<tr >
				<td colspan="7">
							<font color="red">pour un autre pays</font>
				</td>
			</tr>
			<tr >
				<td colspan="7">
							<font color="#000000">
							<a target="_blank" href="http://perroquet666.net46.net/formulaire.php">
							<b>Pour un autre pays envoyer moi un mail cliquez ici </b>
							</a>
							</font>
				</td>
			</tr>
			<tr >
				<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>
			<tr >
				<td width="85%"  bgcolor="#FC0021" align="center" colspan="6">
							<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>
			<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>
			<tr >
				<td width="100%"bgcolor="#6EC5EF" align="CENTER"colspan="7" >
							<b>
							<font size="4">Choississez votre méthode de paiement</font>
							</b>
				</td>
			</tr>
			<tr >
				<td colspan="2"align="center">
							<img width="150" height="53" src="./image/777588-virement.jpg" alt="">
				</td>
				<td colspan="3"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="2"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="3"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="7">
							<font color="#000000">Remettre le bon de commande a 0</font>
							<input type="reset" value="Reset">
							<br>
							<br>
							<font color="#000000">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="7"bgcolor= "#f7dfff">
							<center>
							<font color="#000000">Une question ou un commentaire ?</font>
							</center>
				</TD>
			</tr>
			<TR>
				<TD colspan="7" bgcolor="#ffffff">
							<center>
							<TEXTAREA rows="5" cols="60"name="commentaires">Poster votre question ou votre question ici</TEXTAREA>
							</center>
				</TD>
<			/TR>									
</table>
							<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;">
																																																										</form>
																																																									</body>
																																																								</HTML>

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: comment ajouter une condition avant l envois

Message par webmaster » 23 oct. 2020, 10:44

J'ai modifié le code existant pour ajouter le controle sur le paiement avec le bouton Verification
https://www.toutjavascript.com/user/paiement.html

Mais ce formulaire est vraiment tres complexe.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

flexi2202
Messages : 8
Enregistré le : 21 oct. 2020, 08:56

Re: comment ajouter une condition avant l envois

Message par flexi2202 » 23 oct. 2020, 13:59

bonjour
merci pour le code mais ce qui me tracasse c est pour les frais d envois ; comment faire
la condition est que si le client choisi kiala ou mondial relay il soit oblige de rentrer les données (nom , adresse localite ect...
et qu en même temps que le formulaire refuse de partir si le client n a pas choisi de mode de livraison

flexi2202
Messages : 8
Enregistré le : 21 oct. 2020, 08:56

Re: comment ajouter une condition avant l envois

Message par flexi2202 » 25 oct. 2020, 06:44

bonjour
je reviens avec ce morceau de code
mais j ai un soucis lorsque je choisis un mode d envois le sous menu s ouvre bien
par contre si j en choisi un autre le premier reste ouvert

Code : Tout sélectionner

<!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>

Répondre