Validation de formulaire avec JQuery
Nymphomaniaque
Messages postés
55
Date d'inscription
Statut
Membre
Dernière intervention
-
Apatik Messages postés 5304 Date d'inscription Statut Contributeur Dernière intervention -
Apatik Messages postés 5304 Date d'inscription Statut Contributeur Dernière intervention -
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.
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.
A voir également:
- Validation de formulaire avec JQuery
- Whatsapp formulaire opposition - Guide
- Ethernet n'a pas de configuration ip valide - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Formulaire de contact le bon coin introuvable - Forum Réseaux sociaux
3 réponses
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 :
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 :
Et dans l'html, n'oublie pas l'événement qui appelle la fonction (un onchange pour le select de l'exemple) :
Ce code est bien sûr à adapter pour les input, c'est facile, la variable value tu l'initialises comme ça :
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 :
et si on veut aller au bout des choses, retour à la page html, tu fais la fonction readData :
Voici une autre façon de faire le chose dans le readData :
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 :-)
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 :-)