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 :

Jquery les champs vide dc submit sera visible


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Intégrateur Web
    Inscrit en
    Août 2011
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Août 2011
    Messages : 15
    Par défaut Jquery les champs vide dc submit sera visible
    Bonjour,

    voila mon code:

    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
    <!--************************** script validation formulaire **************-->
    	<script type="text/javascript">
    	var valid_champs='ok';
    		$(document).ready(function() {
    		var valid_champs='ok';
    		//------------------ validation champ email par blur -------------
    			$("#email").blur(function(){
    				valid = true;
    				var email = document.getElementById('email'); 
    				var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    				if (filter.test(email.value)){
     
    				$("#email").css("border-color","#98D100");
    				valid_champs = 'ok';
    				valid = false;
    				}
    				else{
    					$("#email").css("border-color","#FF0000");
    					valid_champs = 'no';
    					valid = false;
    				}
    				if($("#email").val() == "" ){
    					$("#email").css("border-color","#FF0000");
    					valid = false;
    					valid_champs = 'no';
    				}
    				if($("#email").val() == "E-mail" ){
    					$("#message").css("border-color","#FF0000");
    					valid_champs = 'no';
    					valid = false;
    				}
    				return valid;
     
    			});
     
    			//--------------- validation champ objet par blur ------------
    			$("#objet").blur(function(){
    				valid = true;
    				if($("#objet").val() == "" ){
    					$("#objet").css("border-color","#FF0000");
    					valid = false;
    					valid_champs = 'no';
    				}
    				else{
    					$("#objet").css("border-color","#98D100");
    					valid = false;
    					valid_champs = 'ok'
    				}
     
    				if(objet == "Objet" ){
    					$("#message").css("border-color","#FF0000");
    					valid_champs = 'no';
    				}			
    					return valid;
    			});
     
    			//------------ validation champ message par blur -------------
    			$("#message").blur(function(){
    				valid = true;
    				if($("#message").val()!= "" ){
    					$("#message").css("border-color","#98D100");
    					valid = false;
    					valid_champs = 'ok';
    				}
    				else{
    					$("#message").css("border-color","#FF0000");
    					valid_champs = 'no';
    				}
    				if(message != "Votre message" ){
    					$("#message").css("border-color","#98D100");
    					valid_champs = 'ok';
    				}
     
    					return valid;
    			});
     
    			//--------------- animation de champ message -----------------
    			$("#message").focus(function(){
     
    				$("#message").animate({ 
    					height: "50px"
    				  }, 1000 );
    			});
     
    			//------------- visibility de submit par blur ---------------
    			$(document).ready(function(){
    			if(valid_champs ='ok'){
    				$("#envoyer").css("display","block");
    				alert("les champs sont valide");
    			}
    			if(valid_champs ='no'){
    				$("#envoyer").css("display","none");
    				alert("les champs non valide");
    				}
    			});
     
     
    		});
    voila le code html:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <input id="email" type="text" value="E-mail" onFocus="if (this.value=='E-mail') {this.value=''}"/>
                            <div class="cl"></div>
                            <input id="objet" type="text" value="Objet" onFocus="if (this.value=='Objet') {this.value=''}"/>
                            <div class="cl"></div>
                            <textarea id="message" type="text" value="Votre message" 
    						onFocus="if(this.value=='Votre message') {this.value=''}">Votre message</textarea>
                            <div class="cl"></div>
                            <input id="envoyer" type="submit" value="Envoyer"/>
    Cordialement.

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Par défaut
    Bonjour,

    C'est pas très clair comme message... Mais voila tout de même ma réponse, essaie avec cette fonction :
    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
    $("#email").blur(function() {
    	var emailNode = $(this);
    	var emailValue = emailNode.val();
    	var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
     
    	if (emailValue !== "E-mail" && emailValue !== "" && filter.test(emailValue)) {
    		emailNode.css("border-color","#98D100");
    		//valid_champs = 'ok';
    		return true;
    	} else {
    		emailNode.css("border-color","#FF0000");
    		valid_champs = 'no';
    		return false;
    	}
    });
    Cordialement.

    PS. Tu devrais totalement découpler je javascript du html et gérer tes événements en jQuery comme c'est le cas avec "blur" ci-dessus.

    PS2. Question performance, tu devrais stocker tes nodes (Ex. $("#message")...) dans des variables plutôt que de les rechercher à chaque fois. Idem pour leurs valeurs.

  3. #3
    Membre averti
    Profil pro
    Intégrateur Web
    Inscrit en
    Août 2011
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Août 2011
    Messages : 15
    Par défaut
    Je voudrais lorsque tous les champs seront remplis que le submit soit visible tout simplement mais je n'arrive pas à faire ce test.

    Nota bene : il existe un submit déjà invisible nommé (id=#envoyer). J'espère que l'idée est claire maintenant.

  4. #4
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Par défaut
    Essaie :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    			if(valid_champs === 'ok'){
    				$("#envoyer").css("display","block");
    				alert("les champs sont valide");
    			} else {
    				$("#envoyer").css("display","none");
    				alert("les champs non valide");
    				}
    			});
    Quand tu vérifies une condition, tu dois utiliser "==" (ou plutôt "===" en js) et non "="sinon tu affectes la valeur à ta variable et cela retourne true.

    Tu devrais voir les cours ici, cela t'aiderait car tu vas avoir des erreurs comme celles-ci à la pelle je pense. Bon courage.

  5. #5
    Membre averti
    Profil pro
    Intégrateur Web
    Inscrit en
    Août 2011
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Août 2011
    Messages : 15
    Par défaut
    Ca ne marche toujours pas.

    Avez-vous une autre idée ?

  6. #6
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2011
    Messages
    89
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Philippines

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2011
    Messages : 89
    Par défaut
    La variable valid_champs ne doit pas être déclarée deux fois (aucun intérêt), la valeur par défaut ne doit pas être ok sinon le bouton apparaîtra si on ne touche à rien sur le formulaire.

    PS. Essayez de faire des recherches par vous-même aussi...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 27/04/2007, 09h56
  2. eliminer les champs vides
    Par sam01 dans le forum Langage SQL
    Réponses: 3
    Dernier message: 29/10/2006, 19h59
  3. [MySQL] remplir les champs vides
    Par marsya dans le forum PHP & Base de données
    Réponses: 7
    Dernier message: 10/09/2006, 16h43
  4. LIKE et les champs vide
    Par XioN dans le forum Bases de données
    Réponses: 4
    Dernier message: 09/08/2004, 16h24
  5. tri avec les champs vides en dernier
    Par r-zo dans le forum Requêtes
    Réponses: 11
    Dernier message: 03/09/2003, 13h40

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