Verifier un formulaire avec PHP, AJAX et json

par AB » 13 avr. 2011, 15:36

presque tous les controles sont en regex.

Il y a peu de différence entre les regex php et javascript. Pour plus d'info tu rentre "regex javascript" dans google et tu auras toute une flopée de réponses.

par **Cyrano** » 13 avr. 2011, 07:34

Avec Jquery, tu n'est pas obligé d'écrire toutes les méthodes de validation pour certaines vérifications génériques. Il existe un plugin qui fait ça très bien et que tu peux étendre assez facilement pour ajouter des validations particulières : À voir ici. C'est le système dont je me sers au quotidien et ça fonctionne parfaitement bien. Un détail cependant : je déconseille l'utilisation de classes CSS dans les balises pour indiquer les règles de validation d'un champ, il est préférable d'utiliser un fichier .js à part. Pour voir comment utiliser ça, regarde les source du démo «Remember the milk» et regarde comment est construit le système de validation.

par **rimie1** » 13 avr. 2011, 07:19

Pour "strlen" c'est déjà dans mon dernier exemple javascript avec if(valnom.length < 5) [fonction : length]

Pour les regex (preg_match) j'ai donné un exemple avec if (!(regex_mail.test(mail.val()))) [fonction : test] dans ce lien (de nombreuses fois cité) que tu devrais essayer de regarder pour avancer un peu plus. Cela dit, prends le temps de comprendre car il ne sert à rien de faire du copié-collé.

Pour "etc." cette fonction n'existe pas en php

presque tous les controles sont en regex.

La fonction etc existerait en php10 =D>

par AB » 13 avr. 2011, 03:53

Pour "strlen" c'est déjà dans mon dernier exemple javascript avec if(valnom.length < 5) [fonction : length]

Pour les regex (preg_match) j'ai donné un exemple avec if (!(regex_mail.test(mail.val()))) [fonction : test] dans ce lien (de nombreuses fois cité) que tu devrais essayer de regarder pour avancer un peu plus. Cela dit, prends le temps de comprendre car il ne sert à rien de faire du copié-collé.

Pour "etc." cette fonction n'existe pas en php

par **rimie1** » 13 avr. 2011, 02:59

et quelles sont les autres methodes du control jQuery, par exemple en php:

+ On controle la longueur des mots => strlen,
+ Les caracteres => preg_match,
+ Etc,..

Quelles sont leurs equivalents en jQuery.

merci

par AB » 12 avr. 2011, 16:44

C'est déjà mieux dans la bonne direction...

Il manque $nom = $_POST['nom']; dans le code php de ton formulaire.

Par ailleurs comme je te l'ai déjà dit, inutile de faire une requête ajax pour calculer la longueur d'un champ. Et de toutes façons sauf à faire une requête synchrone, le submit n'attendra pas le retour de la requête.

Voici un exemple :

<?php
if (isset($_POST['envoyer']))
{		
		$nom = $_POST['nom'];
				
                if(mb_strlen($nom, 'utf-8') < 5)
                {
                        $message = 'Nom comporte moins de 5 caracteres';
                }
		else
		{
			$message = 'Merci';
		}                            
}


?>

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>

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

        $('#formulaire').submit(function(){
               
               
                var valnom = $('#nom').val();
                
       		if(valnom.length < 5)
			{
                	     $("#error").html("Nom invalid");
			    return false; 
            		}

	})
});
                       
</script>


</head>


<body>

<?php              
	if (isset($message))
	{
			echo $message;
	}
	
?>
<form name="formulaire" id="formulaire" action="#" method="post">
Nom: <input type="text" name="nom" id="nom" /><span id="error"></span>
<br />
<input type="submit" name="envoyer" value="Envoyer" id="envoyer" />
</form>

</body>
</html>

Y'a pas de requête ajax, car pas besoin.

par **rimie1** » 12 avr. 2011, 05:27

j'ai fait un petit effort avec les exemple precedents:

formulaire:

<?php
if (isset($_POST['envoyer']))
{
                if(mb_strlen($nom, 'utf-8') < 5)
                {
                	$erreur = 'Nom comporte moins de 5 caracteres';
                }
   				  
}


?>

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>

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

	$('.formulaire').submit(function(){
		
		
		var valnom = $('.nom').val();
		datas = $(".formulaire").serialize();
		
		$.ajax({
        type: "POST",
        url: "verifier.php",
        data: datas,
        dataType: "json",
        success: function(response) {
        	
        if(response.verifNom == "erreur"){
        	  	
        	$(".error").html("Nom invalid");
            } 
			else 
			{
            $(".message").html('Merci');
            }	

}

});

return false;		
	});
			
 return false;
  }); 
</script>


</head>


<body>

<?php

		
	
	if (isset($erreur))
	{
		echo $erreur;
	}
	
?>
<form name="formulaire" class="formulaire" action="<?php $_SERVER['php_self']; ?>" method="POST">
Nom: <input type="text" name="nom" class="nom" /><span class="message"></span><span class="error"></span>
<br />
<input type="submit" name="envoyer" value="Envoyer" class="envoyer" />
</form>

</body>
</html>

verifier.php

<?php
header('Content-Type: application/json');

	$nom = $_POST['nom'];
	
	if(mb_strlen($nom, 'utf-8') < 5)
	{
		$verifNom = 'erreur';
		}
	else
	{
		$verifNom = 'ok';
	}

		$return_arr["verifNom"] = $verifNom;
		
		echo json_encode($return_arr);

?>

est ce que c'est bon!

par AB » 11 avr. 2011, 16:14

Donc pour résumé ce qu'à dit Cyrano :

1ère étape/
Formulaire classique avec vérification des champs en php à l'envoi du formulaire (sans javascript).

2ème étape/
Ajout d'une couche javascript permettant une meilleure ergonomie.
A ce niveau tu peux faire ce que tu veux sans souci de sécurité puisque l'ensemble des champs sera recontrôlé par php.

Si tu veux aller vite et gagner du temps de développement tu peux ne pas faire la deuxième étape. Mais la première est indispensable.

par **Cyrano** » 11 avr. 2011, 09:10

Salut,
il faut que tu envisages le problème sous un autre angle.

Le JavaScript pouvant être désactivé coté client, tu ne peux de toutes la manières pas baser la validation de tes données et la sécurité de ton application dessus. Il te faut donc à la base une validation en PHP.
L'ajout du JavaScript, que ce soit ou non avec Jquery et/ou du JSON, ça ne devrait jamais se faire pour une autre raison qu'une amélioration ergonomique. Le code exécuté coté client sera forcément plus rapide puisque ça n'utilise pas forcément des échanges réseau entre le client et le serveur.

Masquer le code Jquery ? Pour quoi faire ? Pour éviter qu'un futé ne contourne tes dispositifs de sécurité ? C'est sans intérêt dès l'instant où tu auras une validation coté serveur totalement indépendante du JavaScript, et celui qui désactive la validation coté client ne fera que dégrader sa propre utilisation de ton site. Lorsque ton application fonctionnera sans JavaScript, alors tu pourras ajouter du confort d'utilisation avec du JavaScript, ne fais jamais l'inverse

par **rimie1** » 11 avr. 2011, 02:20

bonjour AB,

est ce que cette solution est valable:

+ code jQuery + json avec submit seulement,
+ reverification des champs en PHP.

Le fait d'utiliser json, c'est que je ne veux pas que le code jQuery soit visible, je pense qu'il precoit une mauvaise securite, de plus j'ai entendu parler avec la nouvelle technologie (firebug par exemple), on peut effectuer des changements cote jQuery, corrigez moi svp.

merci

par AB » 10 avr. 2011, 20:43

Mais encore une fois cela ne te sert à rien de faire ce genre de vérif avec une requête vers php.
STRICTEMENT A RIEN à part d'encombrer le serveur avec des requêtes inutiles.
Je partage ce point avec toi, le seul incomvenient JS est que le code est visible par l'utilisateur, si jamais on fesait une betise au niveau des verifications on peut etre choppe

Voila la raison duquelle j'ai mis ce genre de verification

Que ton code javascript soit mal écrit par le développeur ou qu'il soit désactivé par le visiteur, c'est un problème javascript et les données contrôlées par javascript doivent être normalement revalidées en php hors dépendance javascript.

Le problème de ta méthode est que tu reprends le pire des deux mondes : une requête au serveur pour faire des validations partielles "onkeyup" (alors que javascript pourrait faire le travail sans requête) et de plus ces vérifications sont dépendantes de javascript (donc peuvent être désactivées) puisque tu utilises Ajax.

Normalement c'est uniquement lors de la soumission du formulaire que tu dois refaire les vérifs php - les mêmes mais en une seule fois - que tu as faites "onkeyup" en javascript. C'est à ce prix que l'on a une parfaite complémentarité entre javascript et php : javascript pour éviter des requêtes inutiles et pour le confort du visiteur, complété par un contrôle sécurisé côté serveur en php.

Ta méthode est gourmande en ressource puisque tu fais des requêtes serveur on "onkeyup", et cela ne te dispenseras pas de refaire une validation php juste avant l'enregistrement des données si tu souhaites une sécurité maximum et fonctionnelle sans javascript activé... bref en l'état actuel, ton code n'est ni sécurisé, ni optimisé.

par **rimie1** » 08 avr. 2011, 05:18

Mais encore une fois cela ne te sert à rien de faire ce genre de vérif avec une requête vers php.
STRICTEMENT A RIEN à part d'encombrer le serveur avec des requêtes inutiles.

Je partage ce point avec toi, le seul incomvenient JS est que le code est visible par l'utilisateur, si jamais on fesait une betise au niveau des verifications on peut etre choppe

Voila la raison duquelle j'ai mis ce genre de verification

par AB » 07 avr. 2011, 20:18

Quand tu fais :

dataString = $("#JqAjaxForm").serialize();

tu envoies tous les post du formulaire dans ta requête ajax.

donc tu retrouvera
$_POST['email_ajax'] dans ta page php

et la réponse que tu transmet avec ton tableau php $return_arr se retrouve dans la fonction de retour ajax avec la variable data
et tu peux donc faire "data.email" pour la récupérer (de la même manière que tu fais data.name_check).

Mais encore une fois cela ne te sert à rien de faire ce genre de vérif avec une requête vers php.
STRICTEMENT A RIEN à part d'encombrer le serveur avec des requêtes inutiles.

La seule justification (dans le cas d'un formulaire) de faire une requête ajax vers le serveur est par exemple pour vérifier si le nom transmis n'est pas déjà utilisé dans ta bdd... en résumé de faire des choses que javascript ne sait pas faire (javascript ne peut pas interroger directement une bdd sauf à passer par une requête AJAX).

Pour le reste, genre vérification de la longueur d'une chaine ou validité d'un email, tu peux le faire en javascript directement (sans faire une requête ajax). Et encore une fois c'est exactement l'exemple que je t'ai donné dans mon lien plus haut (vérification directe javascript + confirmation du login par ajax). Cela économise des requêtes puisque si la longueur du nom n'est pas bonne, inutile d'aller plus loin et de vérifier si le login n'est pas déjà utilisé en bdd... (par exemple).

Quand on refais les vérifications en php, on le fait dans la page php qui enregistre le formulaire (et pas avant dans une requête AJAX qui peut toujours être désactivée en désactivant javascript).

par **rimie1** » 07 avr. 2011, 05:35

J'ai mis une verification php pour ne pas la reverifier une 2eme fois (js et php), pour ma 2eme question, j'utilise une fonction pour verifier le nom, si j'ajoute un autre champs par exemple email, je devais refaire une 2eme fonction ou bien il existe une autre methode:

// verifier le nom
function check_name() {

$.ajax({

});

}

// verifier l'email
function check_email() {

$.ajax({

});

}

parce que a chaque fois je devais l'envoyer par la fonction ajax.

par AB » 07 avr. 2011, 02:38

Pas bon ton code php, vire les ob_start(); ob_end_flush(); et mets le header au début de ton code

<?php
header('Content-Type: application/json');

$return_arr = array();

//...
?>

Sinon je vois pas pourquoi tu fais des vérifications en php (longueur de chaine) que tu pourrais faire en javascript donc sans requête au serveur.
Je t'ai déjà donné un lien avec des vérifs javascript + une requête ajax pour vérifier le nom (qui normalement devrait se faire dans le code php par une requête à la bdd). Tu devrais t'en inspirer au moins en partie pour comprendre le fonctionnement (je fais par exemple des tests de longueur sur le nom et validité de mail en javascript).

A part ça je comprend pas ta 2eme question.

Verifier un formulaire avec PHP, AJAX et json

Répondre

Étendre la vue Revue du sujet : Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json

Re: Verifier un formulaire avec PHP, AJAX et json