Afficher / Cacher un message

par **Fredy07** » 13 mars 2011, 05:42

AB & xTG: Je vais le mettre en resolu juste apres la resolution de ce sujet afin de les combiner, merci

par **Fredy07** » 11 mars 2011, 08:10

Le code final est comme suite (si vous avez des remarques et suggestions), bien sur il n'est pas complet au niveau des verifications, mais on voit juste le principe:

<?php
$message = null;

if (isset($_POST['send']))
{
function check_name($name){
                if(mb_strlen($name, 'utf-8') < 5)
                {
                	return false;
                }
   				if(!preg_match("#[a-zA-Z0-9]#i", $name))
                {
                	return false;
                }
                else
                {
                	return true;
                }     
        }

if (!check_name($_POST['name']))
{
        $message = 'sorry Invalid name';
}
}

?>

<html dir="rtl">
<head>
<style type="text/css">
#name, #username, #email {
	border-color: #FF0000;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	-moz-border-radius: 5px;
}

#label01 {
	width: 100px;
	display:block;
	float: right;
}

.frm_fields {
	padding: 5px;
}

input:focus {
      background: #fc9fff;   
}

.CurFocus {
background: #fdecb2;
width: 800px;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

// on determine des variables pour les inputs
	var my_frm_login = $("#frm_login");
	var my_name = $("#name");
	var my_username = $("#username");
	var my_email = $("#email");
	var my_nMsg = $(".nMsg");
	var my_pMsg = $(".pMsg");
	var my_eMsg = $(".eMsg");
	//var span = $("span");

	
	// on procede a la verification des champs
	// Nom
	function check_name() {
		
		if (my_name.val().length < 5)
		{
			my_nMsg.text('We want names with more than 5 chars');
			return false;
		}
		else
		{	
			my_nMsg.html('<img src="success.png" width="20" height="20" align="absmiddle">');
			return true;
		}
	}
	
	

	// Pseudo
	function check_username() {
		
		if (my_username.val().length < 5)
		{
			my_pMsg.text('We want usernames with more than 5 chars');
			return false;
		}
		else
		{	
			
			my_pMsg.html('<img src="loading.gif" width="20" height="20" align="absmiddle"> Checking availability');	
			
			//Récupération des valeurs du formulaires
		var name_val 		= $("#name").val();
		var username_val 	= $("#username").val();
		var dataString 	= 'name=' + name_val + '&username=' + username_val;
	  
	  
		
	$.ajax({
	
	
	type: 'POST',
	url: 'check_availability.php',
	data : dataString, 
	
	success: function(response)
		{  // en cas de failure le code de background est: #ddc9c8 et le success: #badfac et le bleu: #ccccff
			
				if (response != 'ok')
		{
			my_pMsg.html('<img src="error.png" width="20" height="20" align="absmiddle"> Le pseudo que vous avez choisis est deja en utilisation!');
			$(".sAvailable").html('');
	  
			return false;
			
			}
			else
			{
				//my_pMsg.html('<img src="success.png" width="20" height="20" align="absmiddle">');
				
				//my_pMsg.html('');			
				my_pMsg.html('<img src="success.png" width="20" height="20" align="absmiddle"> Le pseudo <b>' + username_val + '</b> est disponible');
			
			
			 
			} //end else response
			} //function response
			}); // end ajax function

		} //end else username.val
		return true; 
	} //end username function
	

	// Email
	function check_email() {
		
		if (my_email.val().length < 5)
		{
			my_eMsg.text('We want a valid emails');
			return false;
		}
		else
		{	
			my_eMsg.html('<img src="success.png" width="20" height="20" align="absmiddle">');
			return true;
		}
	}		
	
	
	
	// On affiche le message des infos pour chaque champs on focus
	
	function info_name() {
			my_nMsg.text('Names can contain letters and numbers only');
		}
		
	function info_username() {
			my_pMsg.text('Usernames can contain letters and numbers only');
		}
		
	function info_email() {
			my_eMsg.text('Valid e-mails only');
		}
	
	
	
	// on focus function sur chaque champs
	my_name.focus(info_name); // verification on focus de la fonction check_name sur le champs name
	my_username.focus(info_username);
	my_email.focus(info_email);
		
	// on blur function sur chaque champs
	my_name.blur(check_name); // verification on blur de la fonction check_name sur le champs name
	my_username.blur(check_username);
	my_email.blur(check_email);
	
	// on keyup function sur chaque champs
	my_name.keyup(check_name); // verification on keyup de la fonction check_name sur le champs name
	my_username.keyup(check_username);
	my_email.keyup(check_email);
	
	
	
			
	my_frm_login.submit(function(){
		if(check_name() & check_username() & check_email())
		{
		$(".congs").fadeIn(1000).html('merci');
		//	return true;
		
		my_frm_login.fadeOut(1000);
		}
		else
		{
			$(".congs").html('erreur');
			return false;
		}
		return false;
 }); 
			
 return false;
  }); // end DOM function
</script>


</head>
<body>
<?php

if(isset($message)) echo $message;

// on inclu le formulaire
include 'site_vars.php';

	echo '<span class="congs"></span>';
    echo '<form name="frm_login" id="frm_login" action="'.$_SERVER['php_self'].'" method="POST">';
    echo '<div class="frm_fields">';
    echo '<label for="name" id="label01">'.$name_var.'</label>';
    echo $name_input;
    echo '<span class="nMsg"></span>'; // en cas d'erreur
    echo '</div>';
    
    echo '<div class="frm_fields">';
    echo '<label for="username" id="label01">'.$username_var.'</label>';
    echo $username_input;
    echo '<span class="pMsg"></span>'; // en cas d'erreur
    echo '<span class="Checking"></span>'; // en cas de success
    
    echo '</div>';
    
    echo '<div class="frm_fields">';
    echo '<label for="email" id="label01">'.$email_var.'</label>';
    echo $email_input;
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '</div>';
    
    echo '</span>';
    
    echo $submit_var;
    
    echo '</form>';
?>

</body>
</html>

par **Fredy07** » 11 mars 2011, 01:58

La différence c'est que l'un gère plusieurs encodages et pas l'autre.

Merci xTG

par **xTG** » 10 mars 2011, 11:18

La différence c'est que l'un gère plusieurs encodages et pas l'autre.

par **Fredy07** » 10 mars 2011, 06:12

Par ailleurs fait attention si tu utilise l'encodage utf-8 il faut utiliser mb_strlen ( $name, 'utf-8') à la place de strlen.

Merci pour le code, c'est quoi la difference entre strlen et mb_strlen pour l'encodage?

par AB » 10 mars 2011, 05:57

Oui mais essaies de regrouper le plus possible ton code php en haut de page,
par exemple :

<?php
$message = null;

if (isset($_POST['send']))
{
function check_name($name){
                if(strlen($name) < 5)
                        return false;
                else
                        return true;
        }

if (!check_name($_POST['name']))
{
        $message = 'sorry Invalid name';
}
}
?>
<html>
<head>
<js>
// mes codes JS ici
</js>
<body>
<?php
if(isset($message)) echo $message;
?>

Par ailleurs fait attention si tu utilise l'encodage utf-8 il faut utiliser mb_strlen ( $name, 'utf-8') à la place de strlen.

par **Fredy07** » 10 mars 2011, 03:49

Puisque la méthode du formulaire est post faits
echo '<pre>';
print_r($_POST);
echo '</pre>';
en haut dans ton code php pour voir ce que tu récupère à la soumission du formulaire.

Y'a un tuto pour récupérer les données dans http://www.phpdebutant.org/ colonne de droite (chapitre 5)

Quelque chose comme ca:

<?php
include 'validation_fin.php';
?>
<html>
<head>
<js>
// mes codes JS ici
</js>
<body>
<?php
if (IsSet($_POST['send']))
{
if (!check_name($_POST['name']))
{
	echo 'sorry Invalid name';
}
}
?>

validation_fin.php:

function check_name($name){
		if(strlen($name) < 5)
			return false;
		else
			return true;
	}

par AB » 09 mars 2011, 22:42

Puisque la méthode du formulaire est post faits

echo '<pre>';
print_r($_POST);
echo '</pre>';

en haut dans ton code php pour voir ce que tu récupère à la soumission du formulaire.

Y'a un tuto pour récupérer les données dans http://www.phpdebutant.org/ colonne de droite (chapitre 5)

par **Fredy07** » 09 mars 2011, 12:14

Si le JS est desactive, j'aimerais effectuer une double verification du cote php, comment puis-je l'integrer?

par **Fredy07** » 08 mars 2011, 07:18

Quand je clique sur envoyer, il me donne le signe "#" dans l'url, est ce qu'il y a une methode de ne pas l'afficher?
C'est normal puisque tu as dans ton formulaire action= "#" et cela indique d'envoyer le formulaire à la page en cours. Pourquoi veux-tu ne pas l'afficher ?
Sinon tu peux indiquer le nom de la page en cours ex : action="ma_page_en_cours.php" ... ou le nom d'un autre fichier si tu veux envoyer le contenu du formulaire vers un autre fichier.

Bon je vois que tu progresse... ça fonctionne maintenant comme tu veux ?

Oui oui, j'ai oublie que j'ai mis le #, et ca progresse bien avec votre exemple, en ajoutant un petit bug, quand je clique sur envoyer, au console (firebug), me donne response vide, ca veut dire il n'a rien recuperer, alors en remplissant les champs reponse est 'ok', voila le code de check_availabilty:

<?php
$username = $_POST['username'];

echo 'ok';
?>

par AB » 08 mars 2011, 05:54

Quand je clique sur envoyer, il me donne le signe "#" dans l'url, est ce qu'il y a une methode de ne pas l'afficher?

C'est normal puisque tu as dans ton formulaire action= "#" et cela indique d'envoyer le formulaire à la page en cours. Pourquoi veux-tu ne pas l'afficher ?
Sinon tu peux indiquer le nom de la page en cours ex : action="ma_page_en_cours.php" ... ou le nom d'un autre fichier si tu veux envoyer le contenu du formulaire vers un autre fichier.

Bon je vois que tu progresse... ça fonctionne maintenant comme tu veux ?

par **Fredy07** » 08 mars 2011, 05:22

Quand je clique sur envoyer, il me donne le signe "#" dans l'url, est ce qu'il y a une methode de ne pas l'afficher?

par **Fredy07** » 07 mars 2011, 10:53

Je pense que ce code marchera:

<html dir="rtl">
<head>
<style type="text/css">
#name, #username, #email {
	border-color: #FF0000;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	-moz-border-radius: 5px;
}

#label01 {
	width: 100px;
	display:block;
	float: right;
}

.frm_fields {
	padding: 5px;
}

input:focus {
      background: #fc9fff;   
}

.CurFocus {
background: #fdecb2;
width: 800px;
}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

// on determine des variables pour les inputs
	var frm_login = $("#frm_login");
	var name = $("#name");
	var username = $("#username");
	var email = $("#email");
	var nMsg = $(".nMsg");
	var pMsg = $(".pMsg");
	var eMsg = $(".eMsg");
	var span = $("span");
//$("#frm_login").focus(function(){ // quand on met la souris au input de la form frm_login

	// on procede a la verification des champs
	// Nom
	function check_name() {
		
		if (name.val().length < 5)
		{
			nMsg.text('We want names with more than 5 chars');
			return false;
		}
		else
		{	
			nMsg.html('<img src="success.png" width="20" height="20" align="absmiddle">');
			return true;
		}
	}
	

	// Pseudo
	function check_username() {
		
		if (username.val().length < 5)
		{
			pMsg.text('We want usernames with more than 5 chars');
			return false;
		}
		else
		{	
			pMsg.html('<img src="success.png" width="20" height="20" align="absmiddle">');
			return true;
		}
	}
	

// Email
	function check_email() {
		
		if (email.val().length < 5)
		{
			eMsg.text('We want a valid emails');
			return false;
		}
		else
		{	
			eMsg.html('<img src="success.png" width="20" height="20" align="absmiddle">');
			return true;
		}
	}		
	
		
	// on blur function sur chaque champs
	name.blur(check_name); // verification on blur de la fonction check_name sur le champs name
	username.blur(check_username);
	email.blur(check_email);
	
	name.keyup(check_name); // verification on keyup de la fonction check_name sur le champs name
	username.keyup(check_username);
	email.keyup(check_email);
	
	
	
			
	frm_login.submit(function(){
		if(check_name()& check_username() & check_email())
		{
		$(".congs").html('merci');
			return true;
		}
		else
		{
			$(".congs").html('erreur');
			return false;
		}
		//return false;
 }); 
			
 return false;
  }); // end DOM function
</script>


</head>
<body>
<?php
include 'site_vars.php';

	echo '<span class="congs"></span>';
    echo '<form name="frm_login" id="frm_login" action="#" method="POST">';
    echo '<div class="frm_fields">';
    echo '<label for="name" id="label01">'.$name_var.'</label>';
    echo $name_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="nMsg"></span>'; // en cas d'erreur
    echo '</div>';
    
    echo '<div class="frm_fields">';
    echo '<label for="username" id="label01">'.$username_var.'</label>';
    echo $username_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="pMsg"></span>'; // en cas d'erreur
    echo '<span class="sAvailable"></span>'; // en cas de success
    echo '<span class="Checking"></span>'; // en cas de success
    
    echo '</div>';
    
    echo '<div class="frm_fields">';
    echo '<label for="email" id="label01">'.$email_var.'</label>';
    echo $email_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '</div>';
    
    echo '</span>';
    
    echo $submit_var;
    
    echo '</form>';
?>

</body>
</html>

par **Fredy07** » 07 mars 2011, 06:13

Un essai en incluant Ajax:

<?php
//include 'validation4.php';
	if (!check_name($name))
	{
		return false;
	}
	else
	{
		return true;
	}
?>

<html dir="rtl">
<head>
<style type="text/css">
em {
	display: none;
}

#name, #username, #email {
	border-color: #FF0000;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	-moz-border-radius: 5px;
}

#label01 {
	width: 100px;
	display:block;
	float: right;
}

.frm_fields {
	padding: 5px;
}

input:focus {
      background: #fc9fff;   
}

.CurFocus {
background: #fdecb2;
width: 800px;
}

.info {
}



</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

//$("input #frm_login").focus(function(){ // quand on met la souris au input de la form frm_login
$("#frm_login input[type='text']").focus(function(){ // quand on met la souris au input de la form frm_login

	$(this).parent().addClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
	$(this).parent().find('.info').html('&nbsp;&nbsp;<img src="info.png" width="20" height="20" align="absmiddle"> Message ici'); // on cherche info afin d'ajouter le code HTML
	$(this).parent().find('.eMsg').html(''); // on ecrase le message d'erreur
	$(this).parent().find('.sMsg').html(''); // on ecrase le message de success
	$(this).parent().find('.sAvailable').html(''); // on ecrase le message de success de l'availability
	
	
	
					}).blur(function(){ // quand on met la souris au input de la form frm_login
	$(this).parent().removeClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
	$(this).parent().find('.info').html(''); // on cherche info afin de l'ecraser et la vider
	
	
 });
	
	
	// on determine des variables pour les inputs
	var frm_login = $("#frm_login");
	var name = $("#name");
	var username = $("#username");
	var email = $("#email");
	
	
	// on procede a la verification des champs
	// Nom
	function check_name () {
		
		if (name.val().length < 5)
		{
			$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le nom comporte moins de 5 caracteres!');
		$(this).parent().find('#name').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
			  
			return false;
		}
		else
		{	
			$(this).parent().find('.sMsg').html('<img src="success.png" width="20" height="20" align="absmiddle">');
		$(this).parent().find('#name').css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
			return true;
		}
	}
	
	
	
		// Username
	function check_username () {
		
		if (username.val().length < 5)
		{
			$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le pseudo comporte moins de 5 caracteres!');
		$(this).parent().find('#username').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
			  
			return false;
		}
		else
		{
			
		$(".sAvailable").html('<img src="loading.gif" width="20" height="20" align="absmiddle"> Checking availability');	
			
			// on doit verifier la valdite du pseudo
				//	function check_username_available () {
				
			//console.log(username);
			
			//Récupération des valeurs du formulaires
		var name_val 		= $("#name").val();
		var username_val 	= $("#username").val();
		var dataString 	= 'name=' + name_val + '&username=' + username_val;
		//var dataString = 'id='+ id + '&name='+ name;
		  
		
	$.ajax({
	
	type: 'POST',
	url: 'check_availability.php',
	data : dataString, 
	
	success: function(response)
		{  // en cas de failure le code de background est: #ddc9c8 et le success: #badfac et le bleu: #ccccff
		
		
		
		
				if (response != 'ok')
		{
			$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le pseudo que vous avez choisis est deja en utilisation!');
			$(".sAvailable").html('');
			
		$(this).parent().find('#username').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
			  
			return false;
			
			}
			else
			{
				 
				
				$(".sAvailable").html('');			
				$(".sAvailable").html('<img src="success.png" width="20" height="20" align="absmiddle"> Le pseudo <b>' + username_val + '</b> est disponible');
				
				
		$(this).parent().find('#username').css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
			return true;
			 
			}
			}
			});
			//}

			return true;
		
		
		} // end else
		} // end username_check function
		
	//name.blur(function(valid_name){
	name.blur(check_name); // verification on blur de la fonction check_name sur le champs name
	username.blur(check_username);


	frm_login.submit(function(){
		if(check_name() & check_username())
		{
		$(".congs").html('merci');
			return true;
			
				$.ajax({
	
	type: 'POST',
	url: 'validation4.php',
	data : dataString, 
	
	success: function(response)
		{  // en cas de failure le code de background est: #ddc9c8 et le success: #badfac et le bleu: #ccccff
				
				if (response != 'ok')
		{
			  $(".congs").html(reponse);
						}
			else
			{
				$(".congs").html(reponse);
			 
			}
			}
			});
			
			}
		else
		{
			$(".congs").html('erreur');
			return false;
			
			}
	});

 return false;
 }); // end DOM function
</script>


</head>
<body>
<?php
include 'site_vars.php';

	echo '<span class="congs"></span>';
    echo '<form name="frm_login" id="frm_login" action="#" method="POST">';
    echo '<div class="frm_fields">';
    echo '<label for="name" id="label01">'.$name_var.'</label>';
    echo $name_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
    
    echo '<div class="frm_fields">';
    echo '<label for="username" id="label01">'.$username_var.'</label>';
    echo $username_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '<span class="sAvailable"></span>'; // en cas de success
    echo '<span class="Checking"></span>'; // en cas de success
    
    echo '</div>';
    
    echo '<div class="frm_fields">';
    echo '<label for="email" id="label01">'.$email_var.'</label>';
    echo $email_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
    
    echo '</span>';
    
    echo $submit_var;
    
    echo '</form>';
?>

</body>
</html>

par AB » 06 mars 2011, 05:15

A la place de ce code tu peut faire l'enregistrement en bdd des données du formulaire et si tout est ok tu renvoies un message comme quoi tout est ok : "merci bla bla..."
Aucun probleme en ce sens:
frm_login.submit(function(){
		if(check_name() & check_username())
		{
		$(".congs").html('merci');
			return true
			}
		else
		{
			$(".congs").html('erreur');
			return false;
			
			}
	});
J'obtiens 'merci', mais en cas de false j'obtiens 'erreur', c'est bien jusqu'a cette etape, ce que je voudrais en cas de false 'erreur', afficher les erreurs survenues en face de leurs champs:
Nom: <input ...> Ici le message d'erreur (Veuillez entrer votre nom)
Pseudo: <input ...> Ici le message d'erreur (Veuillez entrer votre pseudo)
E-mail: <input ...> Ici le message d'erreur (Veuillez entrer votre un email valide)

Oui mais bon si je t'ai montré un exemple de code fonctionnel c'est pour que tu t'en inspire !
En cas d'erreur, je fais bien afficher les erreurs en face de chaque champs à la soumission du formulaire et c'est ce que tu veux, alors qu'est-ce qui t'empêche de faire la même chose ?
Essayes un peu de travailler à partir de ce que je t'ai montré plutôt que de me montrer encore et toujours ton bout de code qui ne fonctionne pas.

Ou alors si je n'ai pas compris ta demande, précise ce que tu veux en plus par rapport à mon exemple, avec des phrases, avec des mots, et pas en me montrant ton code pour la cinquantième fois.

Afficher / Cacher un message

Répondre

Étendre la vue Revue du sujet : Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message

Re: Afficher / Cacher un message