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 :

Validation d'un champ de formulaire avant submit


Sujet :

jQuery

  1. #1
    Membre chevronné
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    638
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 638
    Par défaut Validation d'un champ de formulaire avant submit
    Bonjour ,

    Si le formulaire est incorrect, un message s'affiche pour avertir l'utilisateur que le Formulaire est incorrect, et lui dit quel champ est incorrect.
    Par contre si le même champ est toujours incorrect, le message s'affiche en double.
    Deplus si je clique sur le bouton submit alors que le pseudo est vide l'insertion en base de données s'effectue quand même.

    Code Javascript : 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
     
    /** script traitant de l'affichage de la zone d'inscription */
    $(document).ready(function() {
    	$("#inscription").click(function() {
    		$("#inscriptionForm").fadeIn("fast");		
    		// pour la soumission du formulaire
    		$("#inscriptionForm").submit(function(e) {
    			// pendant la soumission on affiche le loader d'attente Ajax
    			$("#loader").show();
    			e.preventDefault(); // empêcher le navigateur de soumettre lui-même le formulaire			
     
    			// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
    			// lors de l'appel Ajax la référence #inscriptionForm sera perdu il faut donc la réaffecter
    			var url = $(this).attr('action');
    			var pseudo = $(this).find("input[name=pseudo]").val();
    			var password = $(this).find("input[name=password]").val();
    			var verifPassword = $(this).find("input[name=verifPassword]").val();
    			var anneeNaiss = $(this).find("input[name=anneeNaiss]").val();
    			var email = $(this).find("input[name=email]").val();
    			var telephone = $(this).find("input[name=telephone]").val();
    			var masquerTel = $(this).find("input[name=masquerTel]").val();
    			var region = $(this).find("select[name=region]").val();
     
    			var form = $(this);	
    			// pour récupérer la valeur des champs pseudo et password nous utilisons la paire {clé:valeur}
    			// préciser à jQuery que l'on veut le type de sortie JSON
    			$.post(url, {pseudo: pseudo, password: password, verifPassword:verifPassword, anneeNaiss:anneeNaiss, masquerTel:masquerTel, email:email, region: region, telephone:telephone},
    				function(data) {
    				// une fois les données soumises on cache le loader
    				$("#loader").hide();
    				if(data.erreur=="ok") {
    					//console.log(data.retour); // pour le test
    					$('#inscriptionSent').show('fast').append(data.retour);
    					$('#inscriptionSent').fadeOut("slow"); 
    					form.fadeOut(3000); 																					
    				} 					
    				if(data.erreurPseudo) {
    					console.log(data.erreurPseudo); // pour le test
    					$('#formErreur').show("fast").append(data.erreur);
    					$('#inscriptionSent').show("fast").append(data.erreurPseudo);												
    					$('#inscriptionSent').fadeOut(6000);
    					form.find("input[name=pseudo]").val('');
    					form.find('input[name=pseudo]').attr('required', true);						
    				} 
    				if(data.erreurPassword) {
    					console.log(data.erreurPassword); // pour le test
    					$('#formErreur').show("fast").append(data.erreur);
    					$('#inscriptionSent').show("fast").append(data.erreurPassword);
    				}
     
    			}, "json"); // fin $.post()				
    		}); // fin $("#inscriptionForm").submit()				
    	}); // fin $("#inscription").click()
     
    }); // fin $(document)

    Code PHP : 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
     
    <?php	
    	header('Content-Type: text/html; charset=UTF-8');	
    	require_once 'inc_connexion.php';
    	$conn=opendb(); // on se connecte à la Base de données	
     
    	/** script permettant l'insertion d'un membre en Base , ce script devra vérifier que le login n'est pas déjà présent en Base.
    		Le pseudo choisi par le futur membre sera le pseudo intégré en Base. Il faudra par ailleurs envoyé un mail au membre
    		afin de lui communiquer son login et son password après validation de l'unicité du login en base.
    		Il faudra également vérifier la validité des autres informations saisis par l'utilisateur
    	*/
     
    	// variables correspondant aux champs présents en base
    	// utilisation de l'opérateur ternaire ?: pour assigner les variables aux valeurs des champs du formulaire
    	$pseudo = (isset($_POST['pseudo']))?$_POST['pseudo']:null; // on vérifie que la variable est définie 
    	$password = (isset($_POST['password']))?$_POST['password']:null;
    	$password = sha1($password); // on crypte le mot de passe	
    	$verifPassword = (isset($_POST['verifPassword']))?$_POST['verifPassword']:null;
    	$anneNaiss = (isset($_POST['anneeNaiss']))?$_POST['anneeNaiss']:null;
    	$anneeNaiss = htmlspecialchars($_POST['anneeNaiss']);	
    	$email = (isset($_POST['email']))?$_POST['email']:null;	
    	$email = (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))?$email:null; // on vérifie la validité de l'adresse email
    	$email  = htmlspecialchars($_POST['email']); // On rend inoffensives les balises HTML que le visiteur a pu rentrer
    	$telephone = (isset($_POST['telephone']))?$_POST['telephone']:null;
    	$telephone = htmlspecialchars($_POST['telephone']);// On rend inoffensives les balises HTML que le visiteur a pu rentrer
    	$masquerTel = (isset($_POST['masquerTel']))?$_POST['masquerTel']:null;	
    	$region = (isset($_POST['region']))?$_POST['region']:null;
    	$cle = sha1(microtime(TRUE)*100000);	
    	$actif = 0;
     
    	// json permet de faire le pont entre Javascript et PHP
    	$t = array(); // tableau permettant le traitement des données avec json
    	$t["erreur"] = "Formulaire incorrect";	
     
    	// on récupère le nombre d'occurence présentes dans la clause where
    	$sql = "select count(*) as nbr from membres where pseudo ='".$_POST['pseudo']."'";
    	$stmt=$conn->prepare($sql);
    	$stmt->execute();
    	// creation de la variable $result recuperant les lignes et les retournant EN TANT que tableau associatif
    	$result=$stmt->fetch(PDO::FETCH_ASSOC);
    	//print_r($result); // pour le test
    	// on vérifie que le champ pseudo ne soit pas vide et que le pseudo n'est pas déjà dans la table
    	if(!(empty($pseudo)) and !($result['nbr']) == 0) { // si le nombre d'occurrence du résultat de la requête n'est pas nul alors
    		// on crée un indice dans le tableau PHP permettant de récupérer le message et de l'afficher sur le poste client équipé de Javascript 
    		$t["erreurPseudo"] = 'Ce pseudo existe déjà! Veuillez saisir un autre pseudo.';
    	} else if(empty($password) and ($password != $verifPassword)) {
    		// si le champ du mot de passe est vide et que les valeurs des champs ne sont pas équivalents alors	
    		// on utilise notre tableau de données JSON à envoyer sur le serveur	
    		$t["erreurPassword"] = 'Vos mots de passe ne correspondent pas !';
    	} else { // sinon on peut effectuer le traitement de l'insertion en Base du futur membre
    		// requête pour l'insertion du producteur en base
    		$req = 
    			"insert into membres 
    				values(null,:pseudo,:password,:annee_naissance,:email,:telephone,:masquerTel,:region,CURDATE(),:cle,:actif)";
    		// on prépare le traitement de la requête
    		$stm=$conn->prepare($req);	
    		// Tentative d'insertion en base d'un nouveau producteur en utilisant le mode transactionnel
    		// bloc try ... catch()	
    		try {
    			$conn->beginTransaction();
    			// on associe les marqueurs nommés avec les variables crées plus haut
    			$stm->bindParam(':pseudo', $pseudo, PDO::PARAM_STR);
    			$stm->bindParam(':password', $password, PDO::PARAM_STR);
    			$stm->bindParam(':annee_naissance', $anneeNaiss, PDO::PARAM_STR);
    			$stm->bindParam(':email', $email, PDO::PARAM_STR);
    			$stm->bindParam(':telephone', $telephone, PDO::PARAM_STR);
    			$stm->bindParam(':masquerTel', $masquerTel, PDO::PARAM_STR);
    			$stm->bindParam(':region', $region, PDO::PARAM_STR);
    			$stm->bindParam(':cle', $cle, PDO::PARAM_STR);
    			$stm->bindParam(':actif', $actif, PDO::PARAM_INT);
    			// exécution de la requête
    			$stm->execute();				
    			// on commit
    			$conn->commit();					
    			// on utilise notre tableau de données JSON à envoyer sur le serveur
    			$t["erreur"] = "ok"; // utiliser lors de l'appel Ajax pour recevoir la réponse du serveur
    			$t["retour"] = 'Inscription réussie! Un email de confirmation est en cours d\'envoi ...';							
    		} catch(PDOException $e) {	
    			// on rollback si cela se passe mal
    			$conn->rollback();			
    			// on affiche un message d'erreur
    			print '</br>';	
    			print "Erreur lors de l'insertion en base !: ". $e->getMessage() . "</br>";		
    			header( "refresh:7;url=http://localhost/clothesBusiness/index.php" ); 
    		} // fin bloc try ... catch()		 	
     
    	// Préparation du courriel contenant le lien d'activation
    	/** Un email est composé des informations suivantes :
    		Destinataire 
    		Sujet  
    		Entête // optionnel
    		Message		
    	*/
     
    	/**
    	$destinataire = $email;
    	$sujet = "Activer votre compte";
    	$from_name = "vendeur";
    	$from_email = "sogia@sogia.fr";
    	$entete = "From: $from_name <$from_email>";
    	
    	// Le lien d'activation est composé du login(log) et de la clé(cle)
    	$message = 'Bienvenue sur jevendsmesfringues.com,
    	
    	Le site internet jevendsmesfringues.com a été optimisé pour une utilisation
    	sous Mozilla Firefox, Google Chrome et Safari. Nous vous recommandons fortement 
    	d\'utiliser ces navigateurs pour bénéficier de l\'intégralité des fonctionnalités du site internet.
    	Nous vous recommandons également d\'activer le javascript dans votre navigateur
    	afin de profiter de l\'interactivité du site internet.
    	
    	Pour activer votre compte et vous connecter, veuillez cliquer sur le lien ci dessous
    	ou le copier/coller dans l\'un des navigateurs sus-cités.
    
    	http://localhost/includes/clothesBusiness/inc_activation.php?log='.urlencode($login).'&cle='.urlencode($cle).'
    
    
    	---------------
    	Ceci est un mail automatique, Merci de ne pas y répondre.';
    
    	mail($destinataire, $sujet, $message, $entete); 
    	**/
     
    	}
    	// Ne pas oublier d'afficher l'encodage de la représentation json des valeurs envoyées sur le serveur
    	header('Content-Type: application/json');
    	echo json_encode($t); // la fonction json_encode() retourne la représentation json d'une valeur
     
    ?>

    Merci d'avance,
    Transact.

  2. #2
    Membre éprouvé
    Profil pro
    Étudiant
    Inscrit en
    Décembre 2006
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2006
    Messages : 115
    Par défaut
    Salut,

    si le même champ est toujours incorrect, le message s'affiche en double.
    Tu utilises la fonction .append() aux lignes 39 et 40
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $('#formErreur').show("fast").append(data.erreur);
    $('#inscriptionSent').show("fast").append(data.erreurPseudo);
    Donc il rajoute chaque fois une erreur. Tu préféreras peut-être la méthode .html() ou .text()


    si je clique sur le bouton submit alors que le pseudo est vide l'insertion en base de données s'effectue quand même
    S'il n'y a pas encore d'entrée dans la base de donnée, la première instruction sera nécessairement fausse, il va donc obligatoirement tomber dans le second ou le troisième bloc, même si le pseudo est vide.
    Pour le second bloc, si le mot de passe est égal au "mot de passe bis", il n'entre pas dans le second bloc non-plus. Si tu laisses ces deux champs vide, il ne détecte pas d'erreur sur le mot de passe.

  3. #3
    Membre chevronné
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    638
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 638
    Par défaut
    Merci pour ta réponse Michaeljackfan, le premier point est donc résolu.
    Quant au second si je comprends bien il s'agit d'un problème de logique dans le code concernant les structures conditionnelles?

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, c'est ça

    Dans ton code PHP, tu mets
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    $pseudo = (isset($_POST['pseudo']))?$_POST['pseudo']:null;
    or comme le champ pseudo existe dans le formulaire, tu auras toujours une entrée $_POST['pseudo'] donc isset() renverra true même si le champ est vide.
    Pour tester l'existence et que le champ est non vide, il faut utiliser empty()
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre chevronné
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    638
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 638
    Par défaut
    D'autant plus que j'utilise empty() un peu plus bas dans mon code PHP pour vérifier que le champ pseudo n'est pas vide ... je le fais mais pas au bon endroit.

  6. #6
    Membre chevronné
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    638
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 638
    Par défaut
    J'ai revu mon code suite à vos conseils ... et tout est ok SAUF un petit dilemme.
    En effet si le pseudo n'est pas correct et que l'utilisateur s'entête à cliquer sur le bouton submit
    1°) Les données ne sont pas envoyées donc OK.
    2°) le loader s'affiche NOK
    3°) j'aurai voulu avoir un texte comme précédemment.

    Je ne vois pas comment mettre une action sur le clique du bouton de soumission.

  7. #7
    Membre chevronné
    Avatar de Rony Rauzduel
    Homme Profil pro
    En formation Architecte logiciel
    Inscrit en
    Décembre 2008
    Messages
    638
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : En formation Architecte logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2008
    Messages : 638
    Par défaut
    [Résolu]
    J'ai modifié mon code en déplaçant l'affichage du loader.

  8. #8
    Membre éprouvé
    Profil pro
    Étudiant
    Inscrit en
    Décembre 2006
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : Suisse

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2006
    Messages : 115
    Par défaut
    Salut,

    Je voulais rajouter une solution possible au second problème, mais j'ai eu un soucis de connexion.

    La méthode que j'utilise lorsque je veux afficher un message pour chaque erreur est la suivante :
    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
     
    $error="";
     
    if($pseudoUsed){
        $error.="<br />Ce pseudo est déjà utilisé";
    }
    if(empty($pseudo)){
        $error.="<br />Pseudo vide";
    }
    if(empty($password)){
        $error.="<br />Mot de passe vide";
    }
    if($password!=passwordBis){
        $error.="<br />Mot de passe et \"mot de passe bis\" ne sont pas identiques";
    }
     
    if(empty($error)){
        // traitement sql
    }
     
    echo substr($error,6); // élimine le premier "<br />"

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

Discussions similaires

  1. Test champ pourcentage formulaire avant envoi
    Par Xeuch dans le forum jQuery
    Réponses: 4
    Dernier message: 25/03/2013, 10h00
  2. [AC-2010] Expression de validation d'un champ de formulaire
    Par sardaucar dans le forum IHM
    Réponses: 2
    Dernier message: 05/02/2013, 17h06
  3. Validation de plusieurs champs de formulaire
    Par Arjuna dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/09/2012, 12h10
  4. Réponses: 1
    Dernier message: 05/08/2012, 02h02
  5. Retrouver le focus après non validation d'un champ de formulaire.
    Par pidlas dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 19/06/2010, 20h17

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