[DOM] Vérification d'un formulaire avec "bouton submit grisé"

**SunBoy** · 30/11/2008, 20h43

Bonsoir à tous,
Je viens pour requérir votre aide. Je suis débutant en Javascript et confirmé en PHP. Je suis entrain de créer un système d'inscription. J'avais l'habitude de vérifier si les champs étaient remplit en PHP, mais j'ai voulu tenter l'aventure en Javascript.

Explication :
Mon but est, lorsque tous les champs sont remplis, que le bouton "S'inscrire" deviennent cliquable (tant que tous les champs ne sont pas remplis, il reste donc "grisé").

Voici donc mon code Javascript :

Code :

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

1
2
3
4
function ChangeStatut(formulaire) {
if(formulaire.regagree.checked == true) && (formulaire.pseudo.value.length > 0)  && (formulaire.email.value.length > 0) && (formulaire.motdepasse.value.length > 0)
{formulaire.validation.disabled = false }
}

Et voici mon formulaire en xHTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
<form method="post">
Pseudo : <input type="text" name="pseudo" onChange="ChangeStatut(this.form)" /><br /><br />
Mot de passe : <input type="password" name="motdepasse" onChange="ChangeStatut(this.form)" />
<br /><br />
E-mail : <input type="text" name="email" onChange="ChangeStatut(this.form)" /><br /><br />
 
<input type="checkbox" name="regagree" value="valeur" onClick="ChangeStatut(this.form)" /> J'accepte les <a href="#">Conditions Générales d'Utilisation</a><br /><br />
<input type="submit" name="validation" value="S'inscrire" />
 
</form>

Merci d'avance pour votre aide, amicalement, SunBoy

**SpaceFrog** · 01/12/2008, 09h03

formulaire ... ???

et il va le trouver par magie ???
ton form n'a ni nom ni id comment veux tu que le DOM le trouve ???

si tu ne veux pas mettre de nom ou d'id à ton form il faut passer par la methode generique et adopter une syntaxe plus rigoureuse ...

Code :

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

document.forms[0].elements['nomelement'].value

sinon :

Code :

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

document.forms['nomform'].elements['nomelement'].value

**DoubleU** · 01/12/2008, 09h11

Code :

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

onChange="ChangeStatut(this.form)

@SF : this représente l'input, this.form le formulaire contenant l'input, donc tout va bien

@SunBoy : qu'est-ce qui ne marche pas dans ton code?

**SpaceFrog** · 01/12/2008, 09h21

arf oui désolé pas vu le this ...

pa rcontre onChange => onchange

**SunBoy** · 01/12/2008, 19h12

Bonsoir à tous et merci de vos réponses,
Lorsque tous les champs sont remplis, le bouton ne se dégrise toujours pas, et je n'arrive pas à comprendre pourquoi.
Désolé de ne pas avoir été plus explicite.

Amicalement, SunBoy
PS: Je modifierai onChange ^^

**SpaceFrog** · 01/12/2008, 19h25

deux choses:

la condition doit etre globale dont entre ()
et utilise plutot une syntaxe plus rigoureuse pour les elements de form

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
 
<script type='text/javascript'>
function ChangeStatut(formulaire) {
if((formulaire.elements['regagree'].checked) && (formulaire.elements['pseudo'].value.length > 0)  && (formulaire.elements['email'].value.length > 0) && (formulaire.elements['motdepasse'].value.length > 0))
{formulaire.elements['validation'].disabled = false }
}
</script>
</head>
 
<body>
<form method="post">
Pseudo : <input type="text" name="pseudo" onchange="ChangeStatut(this.form)" /><br /><br />
Mot de passe : <input type="password" name="motdepasse" onchange="ChangeStatut(this.form)" />
<br /><br />
E-mail : <input type="text" name="email" onchange="ChangeStatut(this.form)" /><br /><br />
 
<input type="checkbox" name="regagree" value="valeur" onclick="ChangeStatut(this.form)" /> J'accepte les <a href="#">Conditions Générales d'Utilisation</a><br /><br />
<input type="submit" name="validation" value="S'inscrire" disabled="disabled" />
 
</form>

[DOM] Vérification d'un formulaire avec "bouton submit grisé"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager