Rendre obligatoires tous les champs d'un formulaire

Fermé
caronantes Messages postés 1 Date d'inscription samedi 16 mars 2013 Statut Membre Dernière intervention 16 mars 2013 - 16 mars 2013 à 13:26
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 16 mars 2013 à 14:49
Bonjour,

j'ai récupéré un modèle de formulaire gratuit pour mon site internet mais je ne sais pas comment rendre obligatoires tous les champs.

Seuls les champs email et message le sont pour l'instant.

Pouvez-vous m'indiquer ce qui cloche ? Je n'y connais rien en HTML, CSS, PHP, javascript

Voici le code source. D'avance merci pour votre aide, je bloque depuis trois semaines ;)


<!-- START CONTACT FORM -->
<form action="#" class="contact_form">
<p>

</span>Vous êtes :<br>
<select name="TypeClient">
<option value="" selected>Choisissez dans la liste déroulante :</option>
<option value="ParentEleve">Parent d'élève</option>
<option value="Adulte">Adulte souhaitant suivre une formation</option>
<option value="Entreprise">Entreprise</option>
<option value="Autre">Autre</option>
</select>
<p> Les cours / la formation sont pour :<br>
<select name="Eleve">
<option value="">Choisissez dans la liste déroulante :</option>
<option value="VousMeme">Moi-même</option>
<option value="VotreEnfant">Mon enfant</option>
<option value="Salaries">Les salariés de mon entreprise</option>
<option value="Autre">Autre</option>
</select>
<p> Domaine concerné :<br>
<select name="Matiere">
<option value="">Choisissez dans la liste déroulante :</option>
<option value="Anglais">Anglais</option>
<option value="Espagnol">Espagnol</option>
<option value="Francais">Français</option>
<option value="FrançaisEtranger">Français langue étrangère</option>
<option value="Informatique">Informatique</option>
<option value="Methodologie">Méthodologie</option>
<option value="ToutesMatieres">Soutien toutes matières</option>
<option value="Autre">Autre</option>
</select>
<br>
<br>
<span class="contact_form"><span class="caption"><span class="comments_form">Votre niveau actuel dans ce domaine :</span></span></span><br>
<select name="Niveau">
<option value="">Choisissez dans la liste déroulante :</option>
<option value="Maternelle" selected>Maternelle</option>
<option value="CP">CP</option>
<option value="CE1">CE1</option>
<option value="CE2">CE2</option>
<option value="CM1">CM1</option>
<option value="CM2">CM2</option>
<option value="6e">6ème</option>
<option value="5e">5ème</option>
<option value="4e">4ème</option>
<option value="3e">3ème</option>
<option value="2nde">2nde</option>
<option value="1ere">1ère</option>
<option value="Terminale">Terminale</option>
<option value="BEP">BEP</option>
<option value="CAP">CAP</option>
<option value="BacPlus1">Bac + 1</option>
<option value="BacPlus2">Bac + 2</option>
<option value="BacPlus3">Bac + 3</option>
<option value="BacPlus4">Bac + 4</option>
<option value="BacPlus5">Bac + 5 et supérieur</option>
<option value="AdulteDebutant">Adulte de niveau débutant</option>
<option value="AdulteIntermediaire">Adulte de niveau intermédiaire</option>
<option value="AdulteAvance">Adulte de niveau avancé</option>
</select>
<br>
<br>
<label for="message">Vos besoins ou votre message <span>*</span></label>
<textarea class="inputTextarea" cols="88" rows="6" id="message" name="message"></textarea>

<p class="contact_form">
<label for="cp">Votre code postal <span>*</span></label>
<input name="cp" type="text" class="inputText" id="cp" size="10" maxlength="5" />
</p>
<label for="ville">Votre ville <span>*</span></label>
<input name="ville" type="text" class="inputText" id="ville" size="35" maxlength="1000" />
</p>
<label for="telephone">Votre téléphone <span>*</span></label>
<input class="inputText" type="text" id=" telephone" name=" telephone" size="35" maxlength="10"/>
</p>

<label for="email">Votre e-mail <span>*</span></label>
<input class="inputText" type="text" id="email" name="email" />
</p>
</p>
<div class="clear"></div>

<p><a href="javascript:void(0);" class="button white" onClick="$('.contact_form').submit();">Envoyer</a>
</form>
<!-- END CONTACT FORM -->







1 réponse

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 mars 2013 à 14:49
voila une solution en javascript, donc dans le navigateur lorsqu'on clique sur envoi ça verifie et si pas complet le formulaire ne part pas:
<head>
<script type="text/javascript">
function verif_champs(){
	//fonction javascript qui va verifier successivement tous les champs et si pas rempli mesage d'alert et empèche le fomrulaire d'être envoyé
		//pour les listes déroulantes dont le choix est obligatoire:
	//type client
	var typeClient=document.getElementByid('TypeClient'); //on atteint l'element par son id
	if(typeClient.value==""){
		//si value = vide qui correspond à "Choisissez dans la liste déroulante"
		alert ('Vous devez selectionner dans la liste "Vous êtes" !');
		return false; //on sort de la fonction et on empeche l'envoi du formulaire
	}
	//Eleve
	var Eleve=document.getElementByid('Eleve');
	if(Eleve.value==""){
		alert ('Vous devez selectionner dans la liste "Eleve" !');
		return false; //empeche l'envoi du formulaire
	}
	
	//idem pour toutes les listes choix obligatoire

		//pour les chmaps de saisie obligatoires
	//message
	var message=document.getElementByid('message');
	if(message.value==""){
		alert ('Vous devez saisir un message !');
		message.focus(); //on met le foucs dans le champ manquant
		return false; //empeche l'envoi du formulaire
	}
	//code postal
	var cp=document.getElementByid('cp');
	if(cp.value==""){
		alert ('Vous devez saisir le code postal !');
		cp.focus(); //on met le foucs dans le champ manquant
		return false; //empeche l'envoi du formulaire
		
	}
	
	//idem pour tous les autres
	
	//si besoin on peut aussi verifier le format du mail, si cp est bien numerique etc...
	
	//et si on est arrivé la c'est que tout est ok donc
	return true; //autorise l'envoi du formulaire
}

</script>
</head>
<body>
<!-- START CONTACT FORM -->
<form name="form1" method="post" action="" class="contact_form" onsubmit="return verif_champs();" >
<p>

</span>Vous êtes :<br>
<select name="TypeClient" id="TypeClient" >
<option value="" selected>Choisissez dans la liste déroulante :</option>
<option value="ParentEleve">Parent d'élève</option>
<option value="Adulte">Adulte souhaitant suivre une formation</option>
<option value="Entreprise">Entreprise</option>
<option value="Autre">Autre</option>
</select>
<p> Les cours / la formation sont pour :<br>
<select name="Eleve" id="Eleve">
<option value="">Choisissez dans la liste déroulante :</option>
<option value="VousMeme">Moi-même</option>
<option value="VotreEnfant">Mon enfant</option>
<option value="Salaries">Les salariés de mon entreprise</option>
<option value="Autre">Autre</option>
</select>
<p> Domaine concerné :<br>
<select name="Matiere" id="Matiere">
<option value="">Choisissez dans la liste déroulante :</option>
<option value="Anglais">Anglais</option>
<option value="Espagnol">Espagnol</option>
<option value="Francais">Français</option>
<option value="FrançaisEtranger">Français langue étrangère</option>
<option value="Informatique">Informatique</option>
<option value="Methodologie">Méthodologie</option>
<option value="ToutesMatieres">Soutien toutes matières</option>
<option value="Autre">Autre</option>
</select>
<br>
<br>
<span class="contact_form"><span class="caption"><span class="comments_form">Votre niveau actuel dans ce domaine :</span></span></span><br>
<select name="Niveau" id="Niveau">
<option value="">Choisissez dans la liste déroulante :</option>
<option value="Maternelle" selected>Maternelle</option>
<option value="CP">CP</option>
<option value="CE1">CE1</option>
<option value="CE2">CE2</option>
<option value="CM1">CM1</option>
<option value="CM2">CM2</option>
<option value="6e">6ème</option>
<option value="5e">5ème</option>
<option value="4e">4ème</option>
<option value="3e">3ème</option>
<option value="2nde">2nde</option>
<option value="1ere">1ère</option>
<option value="Terminale">Terminale</option>
<option value="BEP">BEP</option>
<option value="CAP">CAP</option>
<option value="BacPlus1">Bac + 1</option>
<option value="BacPlus2">Bac + 2</option>
<option value="BacPlus3">Bac + 3</option>
<option value="BacPlus4">Bac + 4</option>
<option value="BacPlus5">Bac + 5 et supérieur</option>
<option value="AdulteDebutant">Adulte de niveau débutant</option>
<option value="AdulteIntermediaire">Adulte de niveau intermédiaire</option>
<option value="AdulteAvance">Adulte de niveau avancé</option>
</select>
<br>
<br>
<label for="message">Vos besoins ou votre message <span>*</span></label>
<textarea class="inputTextarea" cols="88" rows="6" id="message" name="message"></textarea>

<p class="contact_form">
<label for="cp">Votre code postal <span>*</span></label>
<input name="cp" type="text" class="inputText" id="cp" size="10" maxlength="5" />
</p>
<label for="ville">Votre ville <span>*</span></label>
<input name="ville" type="text" class="inputText" id="ville" size="35" maxlength="1000" />
</p>
<label for="telephone">Votre téléphone <span>*</span></label>
<input class="inputText" type="text" id="telephone" name=" telephone" size="35" maxlength="10"/>
</p>

<label for="email">Votre e-mail <span>*</span></label>
<input class="inputText" type="text" id="email" name="email" />
</p>
</p>
<div class="clear"></div>
<!-- remplaces <a..... etc par le bouton submit -->
<p><input type="submit" name="envoyer" value="Envoyer" />
</form>
<!-- END CONTACT FORM -->
0