Contrôle de saisies pour formulaire html

patrick64121 Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
patrick64121 Messages postés 6 Date d'inscription Statut Membre Dernière intervention - 25 mai 2010 à 09:18

Bonjour à vous amis internaute :)

voila je suis élève de terminale a Rouen et je suis en galère avec le control des saisies des utilisateurs de mon formulaire html...
Sachant que nous n'avons pas eu l'occasion de travailler avec Java Script je serais plus tenter par du langage Php (Mais le java Script reste tout de même bien venu)
Ce problème étant plutôt urgent à résoudre car l'échéance du bac approche à grand pas :(..
Vu mon groupe de projet (complètement à la masse) vous êtes mon dernier espoir, ma lumière. XD
je souhaiterais donc pouvoir contrôler la saisie des utilisateurs et leurs signaler avec des messages d'erreur lorsque la saisie n'a pas été effectuer ou alors incomplète
voila MON FORMULAIRE :

FORM method=post
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>
<TR>
<input type="radio" name="Monsieur" value="M.r">Monsieur
<input type="radio" name="mme" value="mme">Madame
<input type="radio" name="choix" value="ma">Mademoiselle
</SELECT>
</TD>
</TR>
<TR>
<TD>Salle</TD>
<TD>
<SELECT name="Salle">
<OPTION VALUE="salle 23">SALLE 23</OPTION>
<OPTION VALUE="salle 24">SALLE 24</OPTION>
<OPTION VALUE="salle 25">SALLE 25</OPTION>
<OPTION VALUE="salle 26">SALLE 26</OPTION>
<OPTION VALUE="salle 27">SALLE 27</OPTION>
<OPTION VALUE="salle 28">SALLE 28</OPTION>
<OPTION VALUE="salle 29">SALLE 29</OPTION>
<OPTION VALUE="salle du CDI">CDI</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Numero Poste</TD>
<TD>
<INPUT type=Numerique name="numero poste"
</TD>
</TR>
<TR>
<TD>Detail du probleme</TD>
<TD>
<TEXTAREA rows="3" name="detail du problème">
Taper l'objet de votre problème ici</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Envoyer">
</TD>
</TR>
</TABLE>
</FORM>

Afficher la suite

A voir également:

Contrôle de saisies pour formulaire html
Whatsapp formulaire opposition - Guide
Formulaire de réclamation facebook - Guide
Formulaire de reclamation instagram - Guide
Editeur html - Télécharger - HTML
Fan controle - Télécharger - Optimisation

3 réponses

Réponse 1 / 3

xav3601 Messages postés 3289 Date d'inscription Statut Membre Dernière intervention 311

Salut

deja ca implique obligatoirement du JS!

Voilà le code Html qu'il te faut pour ton formulaire:

<FORM method=post name="FrmEmploiDuTemps" >
Enregistrement d'un utilisateur 
<TABLE BORDER=0> 
<TR> 
<TD>Nom</TD> 
<TD> 
<INPUT type=text name="nom"> 
</TD> 
</TR> 
<TR> 
<input type="radio" name="Monsieur" value="M.r">Monsieur 
<input type="radio" name="mme" value="mme">Madame 
<input type="radio" name="choix" value="ma">Mademoiselle 
</SELECT> 
</TD> 
</TR> 
<TR> 
<TD>Salle</TD> 
<TD> 
<SELECT name="Salle"> 
<OPTION VALUE="salle 23">SALLE 23</OPTION> 
<OPTION VALUE="salle 24">SALLE 24</OPTION> 
<OPTION VALUE="salle 25">SALLE 25</OPTION> 
<OPTION VALUE="salle 26">SALLE 26</OPTION> 
<OPTION VALUE="salle 27">SALLE 27</OPTION> 
<OPTION VALUE="salle 28">SALLE 28</OPTION> 
<OPTION VALUE="salle 29">SALLE 29</OPTION> 
<OPTION VALUE="salle du CDI">CDI</OPTION> 
</SELECT> 
</TD> 
</TR> 
<TR> 
<TD>Numero Poste</TD> 
<TD> 
<INPUT type=Numerique name="numero poste" 
</TD> 
</TR> 
<TR> 
<TD>Detail du probleme</TD> 
<TD> 
<TEXTAREA rows="3" name="detail du problème"> 
Taper l'objet de votre problème ici</TEXTAREA> 
</TD> 
</TR> 
<TR> 
<TD COLSPAN=2> 
<INPUT type="submit" value="Envoyer" onClick="verif_form()"> 
</TD> 
</TR> 
</TABLE> 
</FORM>

et après soit tu inclus direct la fonction dans ta page web soit tu créés une page JS à côté, ca dépend surtout de la taille du code JS que tu veux faire!

Voilà un exemple de JS pour vérifier si tout les champs ont été saisis:

function verif_form(){
var loInputs = document.getElementsByTagName("input")
for(i=0; i<loInputs.length; i++){
if(loInputs[i].value = "")
alert("Veuillez saisir tout le champ" + loInputs[i].name);
}

En gros, ca ressemble à ca ^^

Réponse 2 / 3

Gremy87 Messages postés 352 Date d'inscription Statut Membre Dernière intervention 38

bon alors voila un petit code, optimisé.

juste quelques recommandations:

-les balises en majuscules, BEURK et pas valide W3C je crois (en plus c est moche a lire)
-on ferme toutes les balises que l on ouvre
-indenter le code est tres important pour la lecture...

<html>
<head>
<script type="text/javascript">
function verif(form)
{
var nom=false;
var civi=false;
var salle=false;
var cp=false;
var detail=false;

if (is_empty(form.nom.value))
{
alert("Veuillez entrer votre nom");
nom=true;
}
if(!is_checked_bouton_radio(form.civilite))
{
alert("Veuillez choisir une civilité");
civi=true;
}
if(form.salle.value="0")
{
alert("veuillez choisir une salle");
salle=true;
}
if(!is_empty(form.numero_poste.value))
{
if(!verifier_code_postal(form.numero_poste.value))
{
alert("Veuillez entrer un code postal");
cp=true;
}
}
else
{
alert("Veuillez entrer un code postal");
cp=true;
}
if(!is_empty(form.detail_du_problème.value))
{
if(form.detail_du_problème.value=="Taper l'objet de votre problème ici")
{
alert("Veuillez remplir le champ detail du probleme");
detail=true;
}
}
else
{
alert("Veuillez remplir le champ detail du probleme");
detail=true;
}

if(detail || cp|| salle || civi || nom)
{
alert('toto');
return true;
}
else
{
return false;
}
}

function verifier_code_postal(cp)
{
// Definition de la variable booleene match
var match = false;

if( cp.value.length == 5 )
{
// Definition du motif a matcher
var regex = new RegExp('([1-95]{2}|2A|2B)[0-9]{3}', 'gi');

// Test sur le motif
if(regex.test(cp.value))
{
match = true;
}
else
{
match = false;
}
}
else
{
match = false;
}

afficher_champs_incorrect(cp, match);

return match;
}
function is_checked_bouton_radio(radio)
{

for(i = 0; i < radio.length; i++)
{
if(radio[i].checked)
{
return true;
}
}
return false;
}

function is_empty( text )
{
// On test d'abord si la chaine est vide
if( null == text.value || "" == text.value )
{
return true;
}
else
{
// Definition de la variable booleene match
var match = false;

// Si elle n'est pas vide, on regarde si elle contient un espace ou tout autre caractere vide
var regex = new RegExp('^[\\s]', 'gi');

// Test sur le motif
if(regex.test(text.value))
{
// On remet le champs vide
text.value = '';
match = true;
}
else
{
match = false;
}
}

return match;
}
</script>
</head>
<body>
<form method=post action='' onsubmit="verif(this)">
<table BORDER=0>
<tr>
<td>Nom</td>
<td>
<input type=text name="nom" />

</td>
</tr>
<tr>
<td>Civilité</td>
<td>
<input type="radio" name="civilite" id="Monsieur" value="M.r">Monsieur</input>
<input type="radio" name="civilite" id="mme" value="mme">Madame</input>
<input type="radio" name="civilite" id="choix" value="ma">Mademoiselle</input>

</td>
</tr>
<tr>
<td>Salle</td>
<td>
<select name="salle">
<option value="0">Choisissez une salle</option>
<option VALUE="salle 23">SALLE 23</option>
<option VALUE="salle 24">SALLE 24</option>
<option VALUE="salle 25">SALLE 25</option>
<option VALUE="salle 26">SALLE 26</option>
<option VALUE="salle 27">SALLE 27</option>
<option VALUE="salle 28">SALLE 28</option>
<option VALUE="salle 29">SALLE 29</option>
<option VALUE="salle du CDI">CDI</option>
</select>

</td>
</tr>
<tr>
<td>Numero Poste</td>
<td>
<input type=text name="numero_poste" />

</td>
</tr>
<tr>
<td>Detail du probleme</td>
<td>
<textarea rows="3" name="detail_du_problème" onClick="this.value=''">Taper l'objet de votre problème ici</textarea>

</td>
</tr>
<tr>
<td COLSPAN=2>
<input type="submit" value="Envoyer"/>
</td>
</tr>
</table>
</form>
</body>
</html>

euh si t as des questions sur le code, demandes moi =)

PS: le JS est pas obligatoire, les valeurs peuvent être contrôlées en PHP mais ca implique un rechargement de page, une page de contrôle intermédiaire et un petit paquet de booléens

xav3601 Messages postés 3289 Date d'inscription Statut Membre Dernière intervention 311

Certes le JS est pas obligatoire si il veut recharger la page ^^
Mais bon si on fait pas de JS dans un cas comme ca, je pense qu'on peut le considérer comme inutile :-P

Sinon bravo, pour ton code, j'ai pas eu le courage d'en faire un aussi complet!

Réponse 3 / 3

patrick64121 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

les mecs vous assurez grave serieux merci beucoup :)

si j'a des questions je saurez vous les posez :) merci encore

patrick64121 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

// Definition du motif a matcher
var regex = new RegExp('([1-95]{2}|2A|2B)[0-9]{3}', 'gi');

eu cette ligne c

patrick64121 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

a veut dire koi exactement?? XD j'ai pastot suivi la^^

patrick64121 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

j'ai un problème avec le formulaire.. quand tu as rentré toutes tes valeurs, les messages d'erreurs renvoient que aucuns champs n'est mentionné et donc le formulaire ne marche pas
merci de m'aider

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Contact LEBONCOIN

la balise <br> ou <br />

Balise </br>

Votre réponse

Discussions similaires