Sujet Précédent Sujet Suivant

Probleme verification champ formulaire javasp

Fermé
mascam - 25 janv. 2011 à 17:44
 mascam - 27 janv. 2011 à 11:57
Bonjour,

Je rencontre un probleme sur mon formulaire que lequel j'aimerais avoir une verification des champ.

Il y a 4 champs :
-Sujet
-Enseigne
-Adresse
-E-mail.


Mon probleme: la fenetre affichant le message comme quoi le champ n'est pas bien rempli s'affiche bien, mais la page passe tout de meme a la suivante, donc le bouton submit n'est pas stoppé pour que l'internaute remplisse les données manquantes.


Comment y remedier?

Merci d'avance.

Ci dessous mon code formulaire avec javascript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demande de Tarif en ligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles2.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">

function checkBlank(input,msg)
{

if (input.value == null || input.value.length == 0) {
alert ("Il faut remplir les champs Adresse et Email");
return false;
}
return true;
}
function checkForm(Contact)
{
if (
!checkBlank(Contact.adresse) ||
!checkBlank(Contact.e-mail)) {
return false;
} else
Contact.submit();
alert ("Merci , la page de tarifs en ligne s'affichera dans quelques instants ...");
return true;
}
</script>


</head>

<body class="formulaires">

<div id="wrapper">

<div id="header">

<h1><a href="www.boxop.fr"></a></h1>

</div>

<div id="middle">

<div id="content">

<h2>DEMANDE DE TARIF EN LIGNE</h2>

<div id="content-middle">

<form method="post" action="traitement.php">

<fieldset><legend>Veuillez remplir le formulaire ci dessous</legend>
<p><label for="sujet">Nom</label><input type="text" name="sujet" value="" /></p>
<p><label for="enseigne">Enseigne</label><input type="text" name="enseigne" value="" /></p>
<p><label for="adresse">Adresse complete</label><textarea name="adresse"></textarea></p>
<p><label for="e-mail">Adresse Mail</label><input type="text" name="e-mail" value=""></p>
</fieldset>


<div id="input">

<p><input type="reset" value="Réinitialiser le formulaire" /><input type="submit" value="Valider" onclick="checkForm(this.form)"/></p>

</div>

</form>

</div><!--content-middle-->

<div id="content-bottom"></div>

</div><!--content-->

</div>

</div>

</body>
</html>


5 réponses

Réponse 1 / 5
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
25 janv. 2011 à 17:51
Hello,

Je crois que le problème vient du type type="submit" qui pose souvent des problèmes... Essaye de le dégager et vois ce que ça fait.
0
Réponse 2 / 5
mascam
25 janv. 2011 à 17:56
Hello, merci beaucoup pour ton aide.

Alors j'ai essayer mais du coup le bouton SUBMIT ne repond plus à sa fonction premiere : valider et envoyer le toit, meme si le formulaire est bien rempli apres l'affichage du message.

:(
0
Réponse 3 / 5
Utilisateur anonyme
25 janv. 2011 à 21:58
salut,
voilà une question que j'ai traité tout à l'heure
il suffit de preciser un retour booleen "false" à l'evenement onsubmit
donc au niveau de 
<form method="post" action="traitement.php">

tu introduis la fonction qui verifie sous l'evenement onSubmit 
<form method="post" action="traitement.php" onSubmit="fonction_ verification()" >

si j'ai bien lu ton code ta fonction qui verifie les champ est checkBlank()
elle doit returner false pour un mauvais remplissage et le document ne sera pas soumis

retire donc le onclick="checkForm(this.form)" il sert plus à rien car la fonction sera appelée selon l'evenement "submit"

voici le sujet que j'ai deja traité pour mieux comprendre si ça ne parait pas evident
https://forums.commentcamarche.net/forum/affich-20640405-alert-si-zone-texte-est-vide-js
0
__construct()
25 janv. 2011 à 22:12
Bonsoir,
D'ailleurs quel est l'intérêt d'écrire 2 fonctions JS pour traiter un seul et unique formulaire ?
Une seule fonction suffit, il faut faire la vérification des champs dans la fonction qui est appelée dans le onsubmit :
- vérifier le champ nom
- vérifier le champ enseigne
- vérifier le champ adresse
- vérifier le champ email

PS : met un id à chaque input afin de récupérer leur valeur dans la fonction, exemple : 
<p><label for="sujet">Nom</label><input type="text" id="Sujet" name="sujet" value="" /></p>

Et dans la fonction JS : 
var sujet = document.getElementById('Sujet').value;

Ce qui te permettra de rendre le focus au champ invalide...
0
Utilisateur anonyme
25 janv. 2011 à 22:34
bonsoir,
oui effectivement une fonction suffit et c'est ce que j'ai dit si tu relis le post cette fonction checkBlank() (ce que rappelait fonction_verification) qu'il faut modifier et inserer

<form method="post" action="traitement.php" onSubmit="checkBlank()" >
rien ne sert de creer on peut acceder qu champ du formulaire par l'attribut name

soit: name_formulaire.name_l'input
bien sur il faudra donner un attribut "name" au formulaire
0
Réponse 4 / 5
mascam
26 janv. 2011 à 09:36
Merci pour vos réponses :)

Alors j'ai étudier un peu vos réflexions et désormais lorque le champ adresse n'est pas rempli : la page reste bien bloquée et affiche le message! :)

Le probleme: certainement un probleme de code javascipt car cela ne marche que pour un seul champ manquant :(

En effet en bidouillant avec des bouts de codes parfois je dois m'emmêler les pinceaux :/



<html>
<head>


<script language="Javascript">
function verif()
{
if(formulaire.sujet.value == '' && formulaire.adresse.value == '') // si tous les champs sont vides! affiche l'alerte!
{
alert('Merci de remplir les champs !');
return false;
}
else if(formulaire.e-mail.value=='') // s'il manque le nom, affiche l'alerte !
{
alert('Merci de saisir votre mail!');
return false;
}

else if(formulaire.e-mail.value.indexOf('@') == -1)
{
alert("Ce n'est pas une adresse électronique valable!");
formulaire.e-mail.focus();
return false;
}

else if(formulaire.enseigne.value == '') // s'il manque le nom enseigne, affiche l'alerte !
{
alert('Merci de saisir le nom denseigne!');
return false;
}
else{
return true;
}
}
</script>
</head>
<body class="formulaires">
<div id="wrapper">
<div id="header">
<h1><a href="www.boxop.fr"></a></h1>
</div>
<div id="middle">
<div id="content">
<h2>DEMANDE DE TARIF EN LIGNE</h2>
<div id="content-middle">
<form action="traitement.php" method=POST name="formulaire" onSubmit="return verif()">

<fieldset><legend>Veuillez remplir le formulaire ci dessous</legend>
<p><label for="sujet">Nom</label><input type="text" name="sujet" value="" /></p>
<p><label for="enseigne">Enseigne</label><input type="text" name="enseigne" value="" /></p>
<p><label for="adresse">Adresse complete</label><textarea name="adresse"></textarea></p>
<p><label for="e-mail">Adresse Mail</label><input type="text" name="e-mail" value=""></p>
</fieldset>

<p><input type="reset" value="Reinitialiser le formulaire" /><input type="submit" value="Valider" /></p>
</form>


</form>
</div><!--content-middle-->
<div id="content-bottom"></div>
</div><!--content-->
</div>
</div>

</body>
</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
mascam
26 janv. 2011 à 11:41
Hello la compagnie, avec du recul j'ai pu corrigé mon code et désormais TOUT FONCTIONNE !!

Le seul probleme: lors de la déclaration du DOCTYPE plus rien en fonctionne, il semblerais que j'utilise donc le mauvais ? Ou bien qu'il y ait une incompatibilité entre le DOCTYPE et le code ?

Je fourni le code pour aider les prochains :)

Un grand merci pour votre aide

Et n'hésitez pas à me corriger si quelques chose ne va pas dans mon code.




<html>
<head>
<link href="styles2.css" rel="stylesheet" type="text/css" />


<script language="Javascript">
function verif()

{


if(formulaire.sujet.value =='') // si tous les champs sont vides! affiche l'alerte!
{
alert('Merci de saisir votre Nom !');
return false;
}

if(formulaire.enseigne.value =='') // s'il manque le enseigne, affiche l'alerte !
{
alert('Merci de saisir votre Enseigne!');
return false;
}

if(formulaire.adresse.value =='') // s'il manque le adresse, affiche l'alerte !
{
alert('Merci de saisir votre Adresse!');
return false;
}


if(formulaire.adresse.value.length <= 15) {
alert("Veuillez entrer votre adresse de livraison COMPLETE");
return false;
}


if(formulaire.mail.value =='') // s'il manque le mail, affiche l'alerte !
{
alert('Merci de saisir votre e-mail!');
return false;
}


if(formulaire.mail.value.indexOf('@') == -1)
{
alert("Ce n'est pas une adresse mail valable!");
return false;
}


}
</script>

</head>
<body class="formulaires">
<div id="wrapper">
<div id="header">
<h1><a href="www.boxop.fr"></a></h1>
</div>
<div id="middle">
<div id="content">
<h2>DEMANDE DE TARIF EN LIGNE</h2>
<div id="content-middle">
<form action="traitement.php" method=POST name="formulaire" onSubmit="return verif()">

<fieldset><legend>Veuillez remplir le formulaire ci dessous</legend>
<p><label for="sujet">Nom</label><input type="text" name="sujet" value="" /></p>
<p><label for="enseigne">Enseigne</label><input type="text" name="enseigne" value="" /></p>
<p><label for="adresse">Adresse complete</label><textarea name="adresse" ></textarea></p>
<p><label for="mail">Adresse Mail</label><input type="text" name="mail" value=""></p>
</fieldset>

<p><input type="reset" value="Reinitialiser le formulaire" /><input type="submit" value="Valider" /></p>
</form>
<div id="input"> </div>

</form>
</div><!--content-middle-->
<div id="content-bottom"></div>
</div><!--content-->
</div>
</div>

</body>
</html>
0
__construct()
26 janv. 2011 à 19:39 
<script type="text/javascript">
function verif() {
	var sujet = document.getElementById('SUJET').value;
	var enseigne = document.getElementById('ENSEIGNE').value;
	var adresse = document.getElementById('ADRESSE').value;
	var mail = document.getElementById('MAIL').value;

	if(sujet == '') {
		alert('Veuillez saisir votre Nom !');
		document.getElementById('SUJET').focus();
		return false;
	} else if(enseigne == '') {
		alert('Veuillez saisir votre Enseigne!');
		document.getElementById('ENSEIGNE').focus();
		return false;
	} else if(adresse == '') {
		alert('Veuillez saisir votre Adresse!');
		document.getElementById('ADRESSE').focus();
		return false;
	} else if(adresse.length <= 15) {
		alert("Veuillez entrer votre adresse de livraison COMPLETE");
		document.getElementById('ADRESSE').focus();
		return false;
	} else if(mail == '') {
		alert('Veuillez saisir votre e-mail!');
		document.getElementById('MAIL').focus();
		return false;
	} else if(mail.indexOf('@') == -1) {
		alert("Cette adresse mail n'est pas valide!");
		document.getElementById('MAIL').focus();
		return false;
	} else 
		return true;
}
</script>


<p><label for="sujet">Nom</label> <input type="text" id="SUJET" name="sujet" value="" /></p>
<p><label for="enseigne">Enseigne</label> <input type="text" id="ENSEIGNE" name="enseigne" value="" /></p>
<p><label for="adresse">Adresse complete</label> <textarea id="ADRESSE" name="adresse"></textarea></p>
<p><label for="mail">Adresse Mail</label> <input type="text" id="MAIL" name="mail" value="" /></p>
0
mascam
27 janv. 2011 à 11:57
Ok merci , avec ton code le focus est desormais disponible si j'ai bien compris?
0

Discussions similaires

Vérification de l’identité du serveur impossible sur IPHONE
Yo86170 -
Pappy -

20 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
Compte HOTMAIL bloqué . Que faire ?
HAPOKA -
Charliemouse1922 -

27 réponses