Bonjour a tous,
je me lance doucement dans le javascript, j'ai trouvé sur le net une bibliotheque nommée jQuery qui permet de faire des validations de formulaire etc...
je me sers deja de jQuery afin d'afficher ou cacher mon formulaire comme ceci:
et voici la partie HTML:
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 <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> // Execution de cette fonction lorsque le DOM sera entièrement chargé $(document).ready(function() { // Masquage du formulaire $("form").hide(); // CSS : curseur pointeur $("#lien_form").css("cursor", "pointer"); $("#lien_form").click(function() { // Actions uniquement si la réponse n'est pas déjà visible if($("form").is(":visible") == false) { // Affichage du formulaire $("form").slideDown(); } else { $("form").slideUp(); } }); });
donc l'affichage ou non du formulaire marche parfaitement; j'ai donc voulu passer a l'étae suivante qui est la controle du formulaire: avec ceci:
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 <a id="lien_form">[Accéder au formulaire]</a> <form method="POST" action="?page=13"> <table style="margin:auto;padding-top:2px;"> <tr> <td style="padding-top:2px;">Nom</td> <td style="padding-top:2px;"><input type="text" name="nom" id="nom"/></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">Prénom</td> <td style="padding-top:2px;"><input type="text" name="prenom" id="prenom"/></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">Date de naissance<br> (jj/mm/aaaa)</td> <td style="padding-top:2px;"><input type="text" name="date de naissance" id="date" /></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">Adresse complète</td> <td style="padding-top:2px;"><textarea name="adresse" id="adresse" rows="2" cols="15" /></textarea></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">Code postal</td> <td style="padding-top:2px;"><input type="text" name="code_postal" id="code_postal"/></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">Ville</td> <td style="padding-top:2px;"><input type="text" name="ville" id="ville"/></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">Tel</td> <td style="padding-top:2px;"><input type="text" name="tel" id="tel"/></td> <td class="erreur"></td> </tr> <tr> <td style="padding-top:2px;">E-mail</td> <td style="padding-top:2px;"><input type="text" name="email" id="email"/></td> <td class="erreur"></td> </tr> <tr> <td colspan="2" style="text-align:right;padding-top:10px;"><input type="submit" id="envoyer" value="Envoyer"/></td> </tr> </table> </form>
la partie CSS est comme ceci:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 //VERIFICATION FORMULAIRE $("#envoyer").click(function(){ if($("#nom").val() == ""){ $("#nom").next(".erreur").fadeIn().text("Veuillez entrer votre nom"); } else{ $("#nom").next(".erreur").fadeOut(); }
alors la je rencontre deux bugs:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 .erreur{ background: url(images/wrong.png) center no-repeat; padding: 0 0 0 30px; color: red; display: none; }
1/ rien ne s'affiche dans mon bloc erreur aucun message rien
2/ le formulaire disparait lorsque j'appui sur le bouton valider(comme voulu mais juste au chargement de la page!)
Quelqu'un d'avisé pourrait il m'aider svp?
merci
Partager