Validation de formulaire avec JQuery

Fermé
Nymphomaniaque Messages postés 55 Date d'inscription mercredi 22 juillet 2009 Statut Membre Dernière intervention 14 octobre 2012 - 13 oct. 2010 à 00:44
Apatik Messages postés 5304 Date d'inscription mercredi 28 janvier 2009 Statut Contributeur Dernière intervention 29 mai 2016 - 13 oct. 2010 à 10:41
Bonjour,

C'est un formulaire un peu complexe que j'utilise, il combine look (jqTransform) et des tas de choses concernant la manipulation des champ avec jquery, la validation essentiellement.
Toutefois, le formulaire une fois envoyé, je me retrouve avec un message me disant que le form a été posté avec succès mais sans récupérer les valeurs de champs que j'aimerai insérer dans une DB.

Le problème, c'est que l'envoi du formulaire s'effectue avec javascript (Ajaxsubmit) alorsque normalement les valeurs devraient être récupérés avec PHP.
Trop de fichiers JS et trop de code là dedans, je ne m'y retrouve malheureusement pas.

L'exemple du formulaire est sur cette page : https://css-tricks.com/video-screencasts/62-advanced-form-styling-functionality/

Si quelqu'un pourrait m'aider, ça me serait vraiment utile et merci d'avance.

3 réponses

Kopros Messages postés 595 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
Modifié par Kopros le 13/10/2010 à 03:17
Le javascript est exécuté sur le client, l'utilisateur peut donc le désactiver et il me semble que sur les navigateurs type texte ça ne passe pas super bien. Donc pour un truc aussi important que l'envoi de données formulaire, je te déconseille d'utiliser le js.

Perso j'utilise le js, notamment le jquery pour mettre un masque (par exemple pour saisir un n° de téléphone, j'ai mis un masque type 99-99-99-99-99). Je fais quelques vérifs en js, mais juste dans le but d'avertir l'utilisateur s'il fait une faute de frappe, ça ne bloque pas l'envoi des données. C'est dans la page de traitement en php que je vérifie que tous les champs sont corrects avant de trifouiller la base de données.


Si malgré tout tu tiens absolument à commettre l'erreur d'utiliser le js pour l'envoi de données, voici un code AJAX qui envoi à une page php la valeur d'un select par la méthode POST :

function request(oSelect){ 
var value = oSelect.options[oSelect.selectedIndex].value; 
var xhr = getXMLHttpRequest(); //voir note 1 

xhr.onreadystatechange = function() { 
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)){ 
readData(xhr.responseXML); 
document.getElementById('loader').style.display = "none"; //voir note 2 
} 
else if (xhr.readyState < 4){ 
document.getElementById('loader').style.display = "inline"; //voir note 2 
} 
}; 

xhr.open("POST", "ta_page.php", true); 
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xhr.send("nom_de_ta_variable" + value); 
}


Note 1 : la fonction getXMLHttpRequest() tu dois l'avoir appelé quelque part dans la page
Note 2 : ces 2 ligne, OSEF pour le fonctionnement de base. C'est juste si dans une div qui a pour id 'loader' tu mets une image ou un texte en attendant que ça charge.

Voilà, et dans ta page php, tu récupère la variable normalement :
$_POST['nom_de_ta_variable'];


Et dans l'html, n'oublie pas l'événement qui appelle la fonction (un onchange pour le select de l'exemple) :
<select id="select1" onchange="request(this);">...</select>



Ce code est bien sûr à adapter pour les input, c'est facile, la variable value tu l'initialises comme ça :
var value = oSelect.value;


Après pour la fonction readData, ben tu mets dedans ce que tu veux changer sur la page formulaire, si tu veux un truc qui change.
Si ta page php ne renvoit pas de XML, cette fonction readData sert à rien.
Sinon, ben j'te mets ce qu'il faut mettre dans la page php :

<?php 
//connexion à ta base de données 
... 
mysql_query("SET NAMES 'utf8'") //données transférées entre la page et la bdd encodées utf8 
header('Content-Type: text/xml"); // on dit à php qu'il doit renvoyer une page xml 

echo "<?xml version='1.0' encoding='ISO-88-59-1'?>"; 

echo "<liste1>"; 

... 
echo "<item>".$ce_que_tu_veux1."</item>"; 
echo "<item>".$ce_que_tu_veux2."</item>"; 
... 
echo "</liste1>"; 

?>


et si on veut aller au bout des choses, retour à la page html, tu fais la fonction readData :

function readData(oData){ 
var item1 = oData.getElementByTagName('item').item(0).firstChild.data; //item1 contient la valeur de $ce_que_tu_veux1 
var item2 = oData.getElementByTagName('item').item(1).firstChild.data; //item2 contient la valeur de $ce_que_tu_veux2 
}


Voici une autre façon de faire le chose dans le readData :
var nodes =  oData.getElementByTagName('item'); 
var oInner; 

for (var i=0, c=nodes.length; i<c; i++){ 
oInner = document.createTextNode(nodes[i]); 
document.getElementById('id' + i).value=appendChild(oInner); 
} 
}


Voilà, pour la dernière ligne ça sous-entend que t'as des éléments genre input text qui ont des id comme ça : "id0", "id1", "id2" etc. Faut adapter.


J'espère que t'as compris le principe. Les codes je les ai fait de tête, ils sont pas testés, et vu comment je suis fatigué je déconseille de faire un c/c sans revérification.

De rien :-)
0
Nymphomaniaque Messages postés 55 Date d'inscription mercredi 22 juillet 2009 Statut Membre Dernière intervention 14 octobre 2012 4
13 oct. 2010 à 10:38
c'est bien plus compliqué que je ne le pensais.
Effectuer toutes ces modif dans le seul but de récupérer les champs de mon formulaire ! Je vais certainement chercher un formulaire plus simple à intégrer :&
0
Apatik Messages postés 5304 Date d'inscription mercredi 28 janvier 2009 Statut Contributeur Dernière intervention 29 mai 2016 782
13 oct. 2010 à 10:41
Pourquoi ne pas le coder toi même?
HTML/PHP et hop!
0