IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

valider un formulaire avec javascript


Sujet :

jQuery

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut valider un formulaire avec javascript
    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

  2. #2
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2005
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Avril 2005
    Messages : 151
    Par défaut
    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;
        }
    })

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut
    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".

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut
    Bonsoir,

    en fait il correspond a ceci:
    <input type="submit" id="envoyer" value="Envoyer"/>
    mon bouton d'envoi.

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Toutes mes excuses, c'était bien caché.

    J'ai supprimé mon message aussitôt après l'avoir vu, mais déjà trop tard.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut
    pas de pb!

    en fait je me demande si ce que je veux faire marche dans un tableau?
    car j'ai vu un exemple qui fonctionne avec juste des div et span...

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut
    ok c'est bien ça le probleme! les fadeIn etc de jQuery ne fonctionne pas dans les tableaux!
    existe il une autre fonctionde jQuery?
    ou suis-je obligé de virer mon tableau?
    (qui me seravit a mettre en ordre mon formulaire)

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut
    non personne ne sait?
    sinon une astuce pour bien mettre en ordre mon formulaire?
    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
    <form  method="POST" >
    			Nom : 
    			<input type="text" name="nom" id="nom"/><span class="erreur-form"> </span>
    			<br />
    			Prénom :
    			<input type="text" name="prenom"  id="prenom"/><span class="erreur-form"> </span>
    			<br />
    			Date de naissance :
    			<input type="text" name="date de naissance" id="date" /><span class="erreur-form"> </span>
    			<br />
    			Adresse : 
    			<textarea name="adresse" id="adresse" rows="2" cols="15" /></textarea><span class="erreur-form"> </span>
    			<br />
    			Code postal :
    			<input type="text" name="code_postal" id="code_postal"/><span class="erreur-form"> </span>
    			<br />
    			Ville :
    			<input type="text" name="ville" id="ville"/><span class="erreur-form"> </span>
    			<br />
    			Tel :
    			<input type="text" name="tel" id="tel"/><span class="erreur-form"> </span>
    			<br />
    			E-mail :
    			<input type="text" name="email" id="email"/><span class="erreur-form"> </span>
    			<br /><br />
    			<input type="submit" value="envoyer" id="envoyer" />
    car la c'est pas tres carré!

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Après avoir repris les codes sur mon ordinateur pour m'y retrouver, plus de problèmes.

    bigben89 avait donné la solution !
    Il restait à assembler ses recommandations :
    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
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="Author" content="Daniel Hagnoul" />
    	<title>Page type</title>
    	<style type="text/css">
    		body {
    			background-color:#696969;
    			color:#000000;
    			font-family:Arial, Helvetica, sans-serif;
    			font-size:medium;
    			font-style:normal;
    			font-weight:normal;
    			line-height:normal;
    			letter-spacing:normal;
    		}
    		h1,h2,h3,h4,h5 {
    			font-family:"Times New Roman", Times, serif;
    		}
    		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
    			margin:0px;
    			padding:0px;
    		}
    		p {
    			padding:6px;
    		}
    		ul,ol,dl {
    			list-style:none;
    			padding-left:6px;
    			padding-top:6px;
    		}
    		li {
    			padding-bottom:6px;
    		}
    		div#conteneur {
    			width:95%;
    			margin:12px auto;
    			padding:6px;
    			background-color:#FFFFFF;
    			color:#000000;
    			border:1px solid #666666;
    			font-size:0.8em;
    		}
    		div#affiche {
    			margin:12px;
    			border:1px solid #999999;
    		}
    		.clickable {
    			display:block;
    			width:50px;
    			height:50px;
    			margin:6px;
    			padding:4px;
    			border:1px solid red;
    			cursor:pointer;
    		}
     
    		.erreur{
    			/*background: url(images/wrong.png)  center no-repeat;*/
    			background-color:#FFFFCC;
    			padding: 0 0 0 30px;
    			color: red;
    			display: none;
    		}
     
    		#lien_form {
    			cursor:pointer;
    		}
     
    		#IdFormulaire {
    			display:none;
    		}
     
    	</style>
    	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){
     
    			$("#lien_form").click(function(){
    				if($("#IdFormulaire").is(":visible") == false) {
    					$("#IdFormulaire").slideDown();
    				} else {
    					$("#IdFormulaire").slideUp();
    				}
    			});
     
    			$("#IdFormulaire").submit(function(){
    				var boolOk = false;
     
    				if ($("#nom").val() == ""){
    					$("#nom").parent().next(".erreur").text("Veuillez entrer votre nom").fadeIn();
    				} else {
    					$("#nom").parent().next(".erreur").fadeOut();
    				}
     
    				//tester toutes les sources d'erreurs
     
    				//si ok, mettre boolOk=true;
     
    				if ( boolOk ){	//le formulaire ne sera pas envoyé tant que boolOk=false;
    					return true;
    				} else {
    					return false;
    				}
    			});	
     
    		});
    	</script>
    </head>
    <body>
    	<div id="conteneur">
    		<a  id="lien_form">[Accéder au formulaire]</a>
    		<form id="IdFormulaire"  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>
    		<div id="affiche"></div>
    	</div>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  10. #10
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    90
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 90
    Par défaut
    c'est vraiment bizarre, car j'ai essayer ca methode et ca ne marchait pas!
    et en changeant un peu mon code ca passe mais pas dans un tableau ...
    bon merci
    je vais adapter ceci chez moi.
    si pb je reviens!
    merci a vous tous.

Discussions similaires

  1. [PHP 5.2] Curl: Valider un formulaire avec un submit en javascript
    Par altecad dans le forum Langage
    Réponses: 1
    Dernier message: 08/08/2011, 17h18
  2. Validation formulaire avec javascript
    Par guillaume2vo dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 16/02/2010, 12h24
  3. vérification d'un formulaire avec javascript
    Par momoh dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/04/2007, 09h07
  4. Valider un formulaire avec la touche entree
    Par djedie dans le forum ASP.NET
    Réponses: 5
    Dernier message: 29/03/2007, 10h38
  5. Impossible d'envoyer un formulaire avec javascript
    Par Mimi Bulles dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 14/11/2005, 20h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo