Comment vérfier un formulaire avec Ajax

**romann76** · 08/06/2009, 12h41

Bonjour à tous,

J'ai un formulaire sur lequel je voudrais vérifier si les champs ont bien été remplis, si ce n'est pas le cas, j'affiche un message en dessous du champ et je colorise le background du input..

avez vous une idée ?

merci d'avance

Romann

**andry.aime** · 08/06/2009, 13h53

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script type="text/javascript">
function verifier()
{
	if (document.getElementById('champ').value=='')
	{
		document.getElementById('champ').style.backgroundColor='red';
	}
	else
	{
		document.getElementById('champ').style.backgroundColor='white';
	}
}
</script>
</head>
<body>
<input type="text" id="champ"/>
<input type="button" value="Test" onclick="verifier()"/>
</body>
</html>

**romann76** · 08/06/2009, 18h03

Merci mais ca ne fonctionne pas... j'ai fais un test sur "nom"

j'ai mis le code suivante dans le head:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
function verifier()
{
        if (document.getElementById('nom').value=='')
        {
                document.getElementById('nom').style.backgroundColor='red';
        }
        else
        {
                document.getElementById('nom').style.backgroundColor='yellow';
        }
}
</script>
 
</head>
<body>

puis cette partei dans mon body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<form style="padding:0;" action="envoi.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire" >
			<p style="text-align:center;line-height18px;margin:5px 0 5px 0;padding:0;">Merci de r&eacute;diger votre message, nous vous r&eacute;pondrons dans les plus brefs d&eacute;lais.<br/>
			<span class="courant_color">* votre email est indispensable pour vous r&eacute;pondre</span>
			</p>
 
		<table id="table_commun">
			<tr>
				<td class="td_denom">Votre nom </td><td><input type="text" name="nom" size="25" maxlength="60" /></td>
			</tr>
			<tr>
				<td class="td_denom">Votre email </td><td class="td_value"><input type="text" name="mail" size="25" maxlength="60" /></td>
			</tr>
			<tr>
				<td class="td_denom">Sujet </td><td class="td_value"><input type="text" name="objet" size="45" maxlength="100" /></td>
			</tr>
			<tr>
				<td class="td_denom">Votre message</td><td>&nbsp;</td>
			</tr>
			<tr>
				<td class="td_denom">&nbsp;</td><td><textarea name="message" cols="50" rows="6"></textarea></td>
			</tr>
			<tr>
				<td align="right"><input class="btn_valider" type="reset" name="Submit" value="R&eacute;initialiser" /></td>
				<td align="left">
<input type="button" value="valider" onclick="verifier()"/>
				</td>
			</tr>
		</table>
		</form>

a savoir que je teste ce formulaire dans une fenetre affichée avec modalbox

si vous avez d'autres propositions...

merci d'avance de votre aide.

Romann76

Invité · 08/06/2009, 21h32

Tu n'as pas indiqué d'id sur ton champs de saisie "nom"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="nom" size="25" maxlength="60" id="nom" />

Si tu as d'autres soucis, utilise le débugueur firebug pour firefox, ça devrait pas mal t'aider à résoudre les problèmes.

**andry.aime** · 09/06/2009, 08h21

Si ne tu n'attribues pas d'id sur ton input

Code JAVSCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function verifier()
{
        if (document.forms['formulaire'].elements['nom'].value=='')
        {
                document.forms['formulaire'].elements['nom'].style.backgroundColor='red';
        }
        else
        {
                document.forms['formulaire'].elements['nom'].style.backgroundColor='yellow';
        }
}

**romann76** · 09/06/2009, 09h49

Bonjour,

j'ai donc modifié suiuvant vos recommandations :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
			<form action="envoi.php" method="post" enctype="application/x-www-form-urlencoded" name="formulaire" >
			<p style="text-align:center;line-height18px;margin:5px 0 5px 0;padding:0;">Merci de r&eacute;diger votre message, nous vous r&eacute;pondrons dans les plus brefs d&eacute;lais.<br/>
			<span class="courant_color">* votre email est indispensable pour vous r&eacute;pondre</span>
			</p>
				<p id="erreur" style="display:none;border:solid 1px white;height:16px;line-height:16px;padding: 2px;background-color:#DE52B3;color:white">Attention, vous n'avez pas remplis tous les champs obligatoires</p>
		<table id="table_commun">
			<tr>
				<td class="td_denom">Votre nom </td><td><input type="text" name="nom" size="25" maxlength="60" id="nom" /></td>
			</tr>
			<tr>
				<td class="td_denom">Votre email </td><td class="td_value"><input type="text" name="mail" size="25" maxlength="60" /></td>
			</tr>
			<tr>
				<td class="td_denom">Sujet </td><td class="td_value"><input type="text" name="objet" size="45" maxlength="100" /></td>
			</tr>
			<tr>
				<td class="td_denom">Votre message</td><td>&nbsp;</td>
			</tr>
			<tr>
				<td class="td_denom">&nbsp;</td><td><textarea name="message" cols="50" rows="6"></textarea></td>
			</tr>
			<tr>
				<td align="right"><input class="btn_valider" type="reset" name="Submit" value="R&eacute;initialiser" /></td>
				<td align="left">
<input type="button" value="valider" onclick="verifier()"/>
				</td>

ca fonctionne sur une page html mais ca ne fonctionne pas dans une page affichée avec modalbox..

une autre idée ?

**Msieurduss** · 09/06/2009, 13h54

Tu as regardé avec la console d'erreur de Firefox ou, comme le suggérait yotsumi, avec l'excellent module FIREBUG de Firefox ?

Il y peut-être un conflit avec ModalBox... Il faudrait voir où :-)

Comment vérfier un formulaire avec Ajax

JavaScript

Discussions similaires

Partager

Partager