Discussion :

[x2thez]

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:

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();
        }
    });
});

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

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
 
//VERIFICATION FORMULAIRE
    $("#envoyer").click(function(){
        if($("#nom").val() == ""){
            $("#nom").next(".erreur").fadeIn().text("Veuillez entrer votre nom");
        }
        else{
            $("#nom").next(".erreur").fadeOut();
        }

la partie CSS est comme ceci:

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

alors la je rencontre deux bugs:
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

[bigben89]

Déjà, à ta place, je ferais le text() avant le fadeIn(), sinon tu fais un effet sur du texte vide, puis tu affiches le texte.

1/ Le next() te retourne l'élément suivant celui en cours.
Le <td class="erreur"> est situé après le td contenant l'input, et non pas après l'input lui-même.
Il faut donc d'abord que tu te positionnes sur le td (avec parent()), puis seulement, tu fais le next() :

Code :

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

$("#nom").parent().next(".erreur").text("Veuillez entrer votre nom").fadeIn()

2/ Je réponds peut-être à côté, mais pourquoi faire la validation du formulaire au moment du click sur le bouton ( $('#envoyer').click(...) ) ?
Si on se met sur un champ et qu'on appuie sur Entrée, le formulaire sautera ta validation. Il vaudrait mieux faire la validation lors du submit du formulaire :

Code :

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

1
2
3
4
5
6
7
8
$('#IdFormulaire').submit(function(){
    // ... traitement des erreurs
    if( /* formulaire est valide */ ){
        return true;
    }else{
        return false;
    }
})

[x2thez]

salut et merci,

je viens d'essayer ton code avec parent() mais le résultat est strictement le meme: rien ne s'affiche.dans mon css je mets display: none;
afin de cacher les images d'erreurs ("wrong.png") et de les afficher seulement si les champs sont vides ou autres....

sinon pour la deuxième partie de mon problème , je vais essayer d'etre plus clair!
j'utilise jQuery afin de cacher le formulaire au chargment de la page!

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
$(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();
		}
	});

ce code la permet de cacher et afficher le form sur click de lien!
ça marche niquel!

par contre lors de la validation du formulaire, ce bout de code semble être a nouveau exécuté alors que je ne le veux pas!
et du coup le formulaire est de nouveau caché! Hors je voudrais qu'il ne soit caché qu'au chargement de la page, et non pas lors de l'appui sur le bouton "envoyer" ou "valider".