[javascript] controle et verif form

Javascript

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 27 janv. 2006 à 15:47
Syaoran - 28 juin 2012 à 07:31

Bonjour aux spécialistes des formulaires et javascript,
J'ai fait un formulaire avec 4 champs obligatoires parmi d'autres. Un script.js de controle de ces champs.
Jusque là: OK !.
Mais j'ai un autre script qui me génére (mal mais...) une pop up avec le résumé.
Celui là fonctionne aussi mais.... c'est soit l'un, soit l'autre. Pas les deux en même temps. Dans le head j'ai:

<script language="JavaScript" src="../scripts/verif.js" type="text/JavaScript"></script>
<script language="JavaScript" src="../scripts/resume.js" type="text/JavaScript"></script>

puis le verif.js:

<!-- Vérification des champs du formulaire
function verif() 
{ 
	var nom = document.formulaire.nom.value;
	if (document.formulaire.nom.value == "")
	{
		alert ('Veuillez entrer votre nom');
		document.formulaire.nom.focus();
		return false;
	}
	if(document.formulaire.prenom.value == "")
	{
		alert ('Veuillez entrer votre prénom');
		document.formulaire.prenom.focus();
		return false;
	}
	if(document.formulaire.matricule.value == "")
	{
		alert ('Veuillez entrer votre matricule');
		document.formulaire.matricule.focus();
		return false;
	}
	if(document.formulaire.matricule.value.length != 4)
	{ 
		alert ('Le matricule doit comporter 4 chiffres'); 
		document.formulaire.matricule.focus();
		return false; 
	}
	if(document.formulaire.telephone.value == "")
	{
		alert ('Veuillez entrer un n° de téléphone');
		document.formulaire.telephone.focus();
		return false;
	}
	if(document.formulaire.telephone.value.length != 6)
	{ 
		alert ('Le n° de téléphone doit comporter 6 chiffres'); 
		document.formulaire.telephone.focus();
		return false; 
	}
	else {return true;}
}
//-->

et le resume.js:

<!--popup confirmation après validation formulaire. 
function resum(){
   Fenetreresum = window.open('','Vérification','scrollbars=no, resizable=no, toolbar=no, status=no, top=220, left=250, width=420, height=300')
   Fenetreresum.document.write("Merci de prrendre le temps de vérifier ce que vous venez de saisir:<br> ( coordonnées, téléphone où e-mail et la date). <br><strong> Merci !</strong>");
   Fenetreresum.document.write("<br><br><b>Nom : </b>" + document.formulaire.nom.value);
   Fenetreresum.document.write("<br><b>Prénom : </b>" + document.formulaire.prenom.value);
   Fenetreresum.document.write("<br><b>matricule: </b>" + document.formulaire.matricule.value);
   Fenetreresum.document.write("<br><b>téléphone: </b>" + document.formulaire.telephone.value);
   Fenetreresum.document.write("<br><b>e-mail: </b>" + document.formulaire.courriel.value);
   Fenetreresum.document.write("<br><b>date choisie: </b>" + document.formulaire.select.value);
   Fenetreresum.document.write("<br><b>commentaire éventuel: </b>" + document.formulaire.textarea.value);
}
//-->

D'ailleur ce dernier est incomplet car je ne peux pas définir la police, sa taille, sa graisse sa couleur etc.... mais je ne sais pas comment l'écrire ici dessus.

Ma question est celle-ci: Comment je peux afficher une pop up avec le résumé de la saisie , faire OK pour la valider puis afficher une indication (remerciement où autre) pour indiquer au visiteur que son action a bien été effectuée.
Merci mille fois pour vos lumières.

Afficher la suite

A voir également:

Fonction verif javascript
Fonction si et - Guide
Verif lien - Guide
Verif cable signal - Forum Matériel & Système
A javascript error occurred in the main process - Forum Matériel & Système
Fonction miroir - Guide

7 réponses

Réponse 1 / 7

Utilisateur anonyme
30 mars 2006 à 09:55

<html>
<head>
<script language="javascript" type="text/javascript">

function verif() 
{ 
	var nom = document.formulaire.nom.value;
	if (document.formulaire.nom.value == "")
	{
		alert ('Veuillez entrer votre nom');
		document.formulaire.nom.focus();
		return false;
	}
	if(document.formulaire.prenom.value == "")
	{
		alert ('Veuillez entrer votre prénom');
		document.formulaire.prenom.focus();
		return false;
	}
	if(document.formulaire.matricule.value == "")
	{
		alert ('Veuillez entrer votre matricule');
		document.formulaire.matricule.focus();
		return false;
	}
	if(document.formulaire.matricule.value.length != 4)
	{ 
		alert ('Le matricule doit comporter 4 chiffres'); 
		document.formulaire.matricule.focus();
		return false; 
	}
	if(document.formulaire.telephone.value == "")
	{
		alert ('Veuillez entrer un n° de téléphone');
		document.formulaire.telephone.focus();
		return false;
	}
	if(document.formulaire.telephone.value.length != 6)
	{ 
		alert ('Le n° de téléphone doit comporter 6 chiffres'); 
		document.formulaire.telephone.focus();
		return false; 
	}
	else
	{
	 	if(window.document.all('flag').innerHTML="false"){
			resum();
			return false;
		}else{
			return true;
		}
	}
}

function resum(){
   html= "";
   html += "  <head>";
   html += "    <style>";
   html += "      body, table, tr,td{";
   html += "        background-color: #FFFFCC;";
   html += "        color: #009900;";
   html += "        font-family: Verdana, Arial, Courrier;";
   html += "        font-size: 10px;";
   html += "      }";
   html += "    </style>";
   html += "  </head>";
   html += "  <body>";

   html += "<i>Merci de prendre le temps de vérifier ce que vous venez de saisir:<br> ( coordonn&eacute;es, t&eacute;l&eacute;phone ou e-mail et la date).</i>";
   html += "<p/><strong> Merci !</strong><p/>";
   html += "	<table>";
   html += "	  <tr>";
   html += "	    <td><b>Nom</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.nom.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>Pr&eacute;nom</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.prenom.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b<Matricule</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.matricule.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>T&eacute;l&eacute;phone</td>";
   html += "	    <td>: ";
   html += document.formulaire.telephone.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>E-mail</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.courriel.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>Date choisie</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.select.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>Commentaire &eacute;ventuel</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.textarea.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td colspan='2'>";
   html += "	      <button onclick='window.opener.document.all(\"flag\").innerHTML=\"true\";window.opener.document.formulaire.submit();self.close();'>Je confirme</button>";
   html += " <button onclick='self.close();'>Je veux modifier</button>";
   html += "	    </td>";
   html += "	  </tr>";
   html += "	<table>";
   html += "  </body>";
   Fenetreresum = window.open('','Vérification','scrollbars=no,resizable=no,toolbar=no,status=no,top=220,left=250,width=420,height=300')
   Fenetreresum.document.write(html);
}

</script>
</head>
<body>
<form name="formulaire" method="GET" action="http://www.somewhere.com">
<table>
	<tr>
	  <td>Nom:</td>
	  <td><input type="" name="nom" value="Hack" /></td>
	</tr>
	<tr>
	  <td>Prénom:</td>
	  <td><input type="" name="prenom" value="Track" /></td>
	</tr>
	<tr>
	  <td>Matricule:</td>
	  <td><input type="" name="matricule" value="1234" /></td>
	</tr>
	<tr>
	  <td>Téléphone:</td>
	  <td><input type="" name="telephone" value="123456" /></td>
	</tr>
	<tr>
	  <td>Courriel:</td>
	  <td><input type="" name="courriel" value="hack_track@hotmail.com" /></td>
	</tr>
	<tr>
	  <td>Date:</td>
	  <td>
		<select name="select">
			<option value="01/04/2006">01/04/2006</option>
			<option value="01/10/2006">01/10/2006</option>
		</select>

	</tr>
	<tr>
	  <td>Commentaire:</td>
	  <td><textarea cols="40" rows="5" name="textarea" value="">Juste pour tester. HackTrack</textarea></td>
	</tr>
	<tr>
	  <td colspan="2"><input type="submit" onclick="javascript: return verif();"/> <input type="reset"/></td>
	</tr>
</table>
</form>
<div id="flag" name="flag" style="display: none;">false</div>
</body>
</html>

;-)
HackTrack

Réponse 2 / 7

frederic92 Messages postés 23 Date d'inscription lundi 21 novembre 2005 Statut Membre Dernière intervention 3 avril 2006 6
3 avril 2006 à 11:07

moi j'ai un ti pb avec ton script HackTrack !

j'ouvre le formulaire dans un popup et je n'arrive pas la validation de ce formulaire fermer la popup de validation et la popup de formulaire

comment faire ?
merci pouir votre aide

Popup.php

<html>
<head>
<script language="javascript" type="text/javascript">

function verif() 
{ 
	var nom = document.formulaire.nom.value;
	if (document.formulaire.nom.value == "")
	{
		alert ('Veuillez entrer votre nom');
		document.formulaire.nom.focus();
		return false;
	}
	if(document.formulaire.prenom.value == "")
	{
		alert ('Veuillez entrer votre prénom');
		document.formulaire.prenom.focus();
		return false;
	}
	if(document.formulaire.matricule.value == "")
	{
		alert ('Veuillez entrer votre matricule');
		document.formulaire.matricule.focus();
		return false;
	}
	if(document.formulaire.matricule.value.length != 4)
	{ 
		alert ('Le matricule doit comporter 4 chiffres'); 
		document.formulaire.matricule.focus();
		return false; 
	}
	if(document.formulaire.telephone.value == "")
	{
		alert ('Veuillez entrer un n° de téléphone');
		document.formulaire.telephone.focus();
		return false;
	}
	if(document.formulaire.telephone.value.length != 6)
	{ 
		alert ('Le n° de téléphone doit comporter 6 chiffres'); 
		document.formulaire.telephone.focus();
		return false; 
	}
	else
	{
	 	if(window.document.all('flag').innerHTML="false"){
			resum();
			return false;
		}else{
			return true;
		}
	}
}

function resum(){
   html= "";
   html += "  <head>";
   html += "    <style>";
   html += "      body, table, tr,td{";
   html += "        background-color: #FFFFCC;";
   html += "        color: #009900;";
   html += "        font-family: Verdana, Arial, Courrier;";
   html += "        font-size: 10px;";
   html += "      }";
   html += "    </style>";
   html += "  </head>";
   html += "  <body>";

   html += "<i>Merci de prendre le temps de vérifier ce que vous venez de saisir:<br> ( coordonn&eacute;es, t&eacute;l&eacute;phone ou e-mail et la date).</i>";
   html += "<p/><strong> Merci !</strong><p/>";
   html += "	<table>";
   html += "	  <tr>";
   html += "	    <td><b>Nom</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.nom.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>Pr&eacute;nom</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.prenom.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b<Matricule</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.matricule.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>T&eacute;l&eacute;phone</td>";
   html += "	    <td>: ";
   html += document.formulaire.telephone.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>E-mail</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.courriel.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>Date choisie</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.select.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td><b>Commentaire &eacute;ventuel</b></td>";
   html += "	    <td>: ";
   html += document.formulaire.textarea.value;
   html += "	    </td>";
   html += "	  </tr>";
   html += "	  <tr>";
   html += "	    <td colspan='2'>";
   html += "	      <button onclick='window.opener.document.all(\"flag\").innerHTML=\"true\";window.opener.document.formulaire.submit();self.close();'>Je confirme</button>";
   html += " <button onclick='self.close();'>Je veux modifier</button>";
   html += "	    </td>";
   html += "	  </tr>";
   html += "	<table>";
   html += "  </body>";
   Fenetreresum = window.open('','Vérification','scrollbars=no,resizable=no,toolbar=no,status=no,top=220,left=250,width=420,height=300')
   Fenetreresum.document.write(html);
}

</script>
</head>
<body>
<form name="formulaire" method="post" action="index2.php">
<table>
	<tr>
	  <td>Nom:</td>
	  <td><input type="" name="nom" value="nom" /></td>
	</tr>
	<tr>
	  <td>Prénom:</td>
	  <td><input type="" name="prenom" value="fred" /></td>
	</tr>
	<tr>
	  <td>Matricule:</td>
	  <td><input type="" name="matricule" value="1234" /></td>
	</tr>
	<tr>
	  <td>Téléphone:</td>
	  <td><input type="" name="telephone" value="123456" /></td>
	</tr>
	<tr>
	  <td>Courriel:</td>
	  <td><input type="" name="courriel" value="Mon_mail@fai.fr" /></td>
	</tr>
	<tr>
	  <td>Date:</td>
	  <td>
		<select name="select">
			<option value="01/04/2006">01/04/2006</option>
			<option value="01/10/2006">01/10/2006</option>
		</select>

	</tr>
	<tr>
	  <td>Commentaire:</td>
	  <td><textarea cols="40" rows="5" name="textarea" value="">Juste pour tester.</textarea></td>
	</tr>
	<tr>
	 <td colspan="2"><input type="submit" onclick="javascript: return verif();"/> <input type="reset"/>
	 <td colspan='2'>"; 
   </td>
	</tr>
</table>
</form>
<div id="flag" name="flag" style="display: none;">false</div>
</body>
</html>

Et voici juste le script javascript d’ouverture de la popup de ma page index2.html

</script>

<script language="javascript">

function popupcentree(page,largeur,hauteur,options)
{
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page,"popup","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}

</script>

Réponse 3 / 7

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 521
30 mars 2006 à 16:51

Merci infiniment !

Je suis en train de faiore des essais.
J'ai créé deux fichier js séparés. Et ça marche ! Mais lorsque j'intègre le formulaire dans ma page qui contient un petit speech au début et un menu à gauche, ça ne fonctionne plus (l'affichage du résumé car le controle, lui, fonctionne).

Il faut aussi que je précise que pour le moment je suis condamné au mailto en post. Il faudrait que je trouve comment créer des enregistrements sur une feuille excel en validant le formulaire (ça devrait pouvoir se faire avec une macro où un truc du genre non ?)

En tous cas, tu me sort une grosse épine du pied et ça.... j'oublirai pas.

Merci encore.

Réponse 6 / 7

jp.bond
23 sept. 2010 à 12:01

laissez tomber, ca marche très bien, il y avait une erreur ailleurs dans le code...quelle buse je suis !

killuazoldayek
19 oct. 2010 à 20:05

merci bien pour le code mai j voulai juste savoir a koi sert cet ligne "document.form1.sexe.focus();". merci une autre foi

zico
1 mars 2011 à 14:55

ca sert à remettre le curseur sur le champ sexe.

sousou
17 avril 2012 à 14:57

salut, j'ai un petit probleme au niveau de code js lors de controle
je veut vérifier que le nom est composé de caractére et le numéro de téléphone est composé par seulement des nombres, aidez moi SVP et merci

Syaoran
28 juin 2012 à 07:31

Salut pour vérifier la numéricité d'un champ la fonction isNaN(nom_du_champ).

Réponse 7 / 7

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 521
1 avril 2006 à 23:03

Salut Hack,

C'est bizarre ! j'ai une page qui explique qu'il y aura des séances d'initiation à la sécurité et dans laquelle je veux mettre un formulaire pour les inscription à ces séances.
J'ai donc testé ta correction (formulaire seul) et ça fonctionne impec.
MAIS, si j'ajoute ce même formulaire à ma page qui propose des séances d'intiation, les controles des champs fonctionnent sauf qu'au moment de valider ça n'affiche pas le résumé.
Par contre, si je met un lien "inscription" qui pointe sur le formulaire seul (dans une pop up) là ça fonctionne, controles + affichage du résumé.

Comment expliquer cela ?
Je suis revenu à la formule des .js séparés (verif.js + resum.js) en mettant

<script language.......><script>

dans le head du formulaire.
Ca fonctionne très bien.

Si tu veux, lundi je t'enverrai le code complet de la page en question...
Merci encore et bon week end.

Discussions similaires

formulaire : possible sans php ni mysql ?

Javascript evenement touche entrée du clavier

copier et modifier une page html

javascript pour compteur de visites live svp

[Javascript] Nom de variable dynamique ?

[javascript] onClick et function

Votre réponse

Discussions similaires