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

Version imprimable

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:

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:

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

01/12/2008, 09h03
SpaceFrog

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:

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

sinon :

Code:

document.forms['nomform'].elements['nomelement'].value
01/12/2008, 09h11
DoubleU

Code:

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?
01/12/2008, 09h21
SpaceFrog

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

pa rcontre onChange => onchange
01/12/2008, 19h12
SunBoy

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

deux choses:

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

Code:

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>

01/12/2008, 21h39
SunBoy

Résolu, merci !