Comment vérfier un formulaire avec Ajax

Version imprimable

08/06/2009, 12h41
romann76

Comment vérfier un formulaire avec Ajax

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

Salut,

Code:

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>

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

j'ai mis le code suivante dans le head:

Code:

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:

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

08/06/2009, 21h32
Invité

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

Code:

<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.

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

Code:

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';
        }
}

Bonjour,

j'ai donc modifié suiuvant vos recommandations :

Code:

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 ?

09/06/2009, 13h54
Msieurduss

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ù :-)