verification de formulaire dynamique

Version imprimable

Bonjour,

Je viens aujourd'hui faire appel à vous puisque je suis confronté à un problème dont je ne sais absolument pas où trouver la solution.
Je développe actuellement un site internet disposant d'une page contact.

Celle-ci sert pour les demande de contact, mais aussi pour faire une demande de devis.
L'utilisateur est amené à choisir (via des radio) s'il veut faire une demande de devis ou de contact.

Par défaut, le formulaire de devis est affiché. J'ai un script javascript qui verifie le formulaire et permet de le valider uniquement lorsque les champs ne sont pas vide. Seulement, s'il l'utilisateur choisi "contact", ou alors s'il clique sur "contact" puis "devis" (le contenu a donc changé pour revenir à celui de base), le script ne fonctionne plus.

Assez parlé, un peu de code pour mieux comprendre :

Fonction javascript permettant de modifier le formulaire suivant le choix de l'utilisateur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$("input[name=typeContact]:radio").click(function() {
        if($(this).val() == 'Devis') {
            html = '<legend>Type du produit</legend>\n\
                         <input type="radio" name="typeProduit" value="Progiciel" checked="checked">Progiciel</input>\n\
                        <input type="radio" name="typeProduit" value="SiteWeb">Site web</input>\n\
                        <div><input type="text" name="objet" id="objet" placeholder="objet"><span class="error"></span></div>\n\
                        <textarea name="message" id="messageContact" placeholder="Message"></textarea><span class="error"></span>\n\
                        <textarea name="cahierCharge" id="cahierCharge" placeholder="Cahier des Charges"></textarea><span class="error"></span>\n\
                        <div><input type="text" name="budget" id="budget" placeholder="Budget"><span class="error"></span></div>\n\
                        <div><input type="text" name="mail" id="mail" placeholder="Adresse e-mail"><span class="error"></span></div>\n\
                        <input type="submit" id="submitDevis" value="Envoyer">';
            $('#suite').html(html);
        } else if($(this).val() == 'Contact') {
            html = '<div><input type="text" name="objet" id="objet" placeholder="Objet"><span class="error"></span></div>\n\
            <textarea name="message" id="messageContact" placeholder="Message"></textarea><span class="error"></span>\n\
           <div><input type="text" name="mail" id="mail" placeholder="Adresse e-mail"><span class="error"></span></div>\n\
            <input type="submit" id="submitDevis" value="Envoyer">';
            $('#suite').html(html);
        }
    });

Le formulaire HTML de base :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<form method="POST" action="index.php?p=contactSend">
        <legend>Type</legend>
        <input type="radio" name="typeContact" value="Devis" checked="checked">Devis</input>            
        <input type="radio" name="typeContact" value="Contact">Contact</input>    
        <div id="suite">
            <legend>Type du produit</legend>
            <input type="radio" name="typeProduit" value="Progiciel" checked="checked">Progiciel</input>            
            <input type="radio" name="typeProduit" value="SiteWeb">Site web</input>
 
            <div><input type="text" name="objet" id="objet" placeholder="Objet"><span class="error"></span></div>
            <textarea name="message" id="messageContact" placeholder="Message"></textarea><span class="error"></span>
            <textarea name="cahierCharge" id="cahierCharge" placeholder="Cahier des Charges"></textarea><span class="error"></span>
            <div><input type="text" name="budget" id="budget" placeholder="Budget"><span class="error"></span></div>
           <div><input type="text" name="mail" id="mail" placeholder="Adresse e-mail"><span class="error"></span></div>
            <input type="submit" id="submitDevis" value="Envoyer">
        </div>
    </form>

Et enfin, une des fonctions de verifications :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$("#objet").blur(function() {
        if($(this).val() == "") {
             $(this).next().show().html("<img src='templates/images/check-rouge.png''> Merci de bien vouloir saisir l\'objet");
 
             $('#submitDevis').attr("id", "noSubmit");
             $('#noSubmit').attr("disabled","disabled");
             objet = false;
        } else {
            $(this).next().show().html("<img src='templates/images/check-vert.png''>");
            objet = true;
            if(objet == true && budget == true && mail == true && messageContact == true && cahierCharge == true) {
                $('#noSubmit').attr("id", "submitDevis");
                $('#submitDevis').removeAttr("disabled");         
            }
 
        }
    });

Ce code fonctionne très bien sur le formulaire de base, mais plus du tout lorsque l'utilisateur change de formulaire.

En espérant que quelqu'un puisse m'aider.

Cordialement, Florian J.

30/12/2011, 11h10
RomainVALERI
Il me semble très périlleux et inutilement complexe de recréer le formulaire à chaque changement... pourquoi ne pas avoir deux formulaires distincts avec une option dans l'interface (bouton ou autre), qui permette d'afficher soit l'un soit l'autre... ?

Cela dit, si tu veux simplement réparer l'existant sans tout remettre en question, comme c'est malheureusement probable (:roll:), je laisse la main aux spécialistes de jQuery, dont je ne suis pas. ^^

Simple remarque de syntaxe :
Code:

1 2 3 4 objet = true; if(objet == true && budget == true && mail == true && messageContact == true && cahierCharge == true) { // ... }
peut également s'écrire :
Code:

1 2 3 4 objet = true; if(budget && mail && messageContact && cahierCharge) { // ... }
30/12/2011, 11h11
emmanuel.remy

Salut,

Suis pas spécialiste de la librarie que tu utilises mais je pense que le souci provient du fait que tu affiches ta page avec le formulaire de base + la gestion des events associés; ensuite tu DETRUIS le dom existant ET les events associés pour RECREER UN DOM avec le nouveau formulaire. Donc tu recrées bien un formulaire mais avec des NOUVEAUX objets et tu n'as plus d'events associés :aie: (ce n'est pas parce que tes éléments ont le même id que ce sont les mêmes objets que les précédents qui ont été détruits)

Tu dois donc réattacher tes events après chaque création de formulaire.

ERE
30/12/2011, 11h45
Florian54

Bonjour,

Tout d'abord merci pour vos réponses rapides.
Ensuite, vos différents commentaires m'ont donné une idée pour contourner le problème (et non pas forcément m'obstiner dans cette voie).

J'imaginais afficher mes deux types de formulaire directement dans des div different, et de jouer en Ajax sur le display d'un des deux.

En gros, si l'un est affiché, l'autre serait caché.
Seulement mes formulaires possèdes des idées semblables (email, objet du message).
Or un ID se doit d'être unique sur la page.

Pensez-vous que cette solution pourrait fonctionner ?

Et pour répondre à Emmanuel, je ne sais absolument pas comment réattacher les évènements après la création du formulaire.

Il s'agit là d'un problème particulier, dont il est relativement compliqué d'obtenir une réponse via internet.

Je vous remercie d'or et déjà pour tout le soutien que vous pourrez m'apporter.

Cordialement, Florian J.
30/12/2011, 11h54
emmanuel.remy

Réexécute tes fonctions de validation après la recréation de ton DOM ($("#objet").blur(function()...)

Mais regarde aussi dans le doc de jQuery .on() ou .live(), c'est sûrement une autre solution pour toi.

ERE
30/12/2011, 14h54
RomainVALERI

Citation:

Envoyé par Florian54

J'imaginais afficher mes deux types de formulaire directement dans des div different, et de jouer en Ajax sur le display d'un des deux.

En gros, si l'un est affiché, l'autre serait caché.
Seulement mes formulaires possèdes des idées semblables (email, objet du message).
Or un ID se doit d'être unique sur la page.

Pensez-vous que cette solution pourrait fonctionner ?

C'est ce que je te proposais en effet, et oui il te faut des id uniques sur la page. Tu peux conserver les mêmes appellations mais les préfixer avec un mot ou une lettre correspondant au form (id="devis_objet", id="contact_objet"), par exemple, ou simplement utiliser un compteur suffixé à l'id original (id="objet1", id="objet2"). De toutes façons, si tu adoptes cette solution, tes form seront directement écrits dans ton HTML, pas générés par JS, donc tu peux les écrire comme bon te semble, il suffit que le code JS qui vient référencer ces éléments reste cohérent, notamment les getElementById* ^^

* ou disons les $(...) se basant sur les id, puisque tu utilises jQuery

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form id="formID" method="POST" action="index.php?p=contactSend">
	<legend>Type</legend>
	<input type="radio" name="typeContact" value="Devis" checked="checked">Devis</input>            
	<input type="radio" name="typeContact" value="Contact">Contact</input>    
	<div id="suite">
		<legend>Type du produit</legend>
		<input type="radio" name="typeProduit" value="Progiciel" checked="checked">Progiciel</input>            
		<input type="radio" name="typeProduit" value="SiteWeb">Site web</input>
		<div><input type="text" name="objet" id="objet" placeholder="Objet"><span class="error"></span></div>
		<textarea name="message" id="messageContact" placeholder="Message"></textarea><span class="error"></span>
		<textarea name="cahierCharge" id="cahierCharge" placeholder="Cahier des Charges"></textarea><span class="error"></span>
		<div><input type="text" name="budget" id="budget" placeholder="Budget"><span class="error"></span></div>
	   <div><input type="text" name="mail" id="mail" placeholder="Adresse e-mail"><span class="error"></span></div>
		<input type="submit" id="submitDevis" value="Envoyer">
	</div>
</form>

Code:

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
var htmlContact ='<div><input type="text" name="objet" id="objet" placeholder="Objet"><span class="error"></span></div>\n\
					<textarea name="message" id="messageContact" placeholder="Message"></textarea><span class="error"></span>\n\
					<div><input type="text" name="mail" id="mail" placeholder="Adresse e-mail"><span class="error"></span></div>\n\
					<input type="submit" id="submitDevis" value="Envoyer">',
	jObjContact = $("<div/>", {
		"id": "suite",
		"html": htmlContact
	}),
	jObjDevis = null,
	objet, // objet ???
	budget,
	mail,
	messageContact,
	cahierCharge;
 
$("input[type='radio'][name='typeContact']").change(function(){
	if ( $(this).val() == 'Devis' ){
		$('#suite').remove();
		$('#formID').append( jObjDevis );
	} else {// valeur == 'Contact'
		jObjDevis = $('#suite').detach();
		$('#formID').append( jObjContact );
	}
});
 
// jQuery 1.7+ sinon delegate
$('#formID').on("blur", "#objet", function() {
	if( $(this).val() == "") {
		$(this).next().show().html("<img src='templates/images/check-rouge.png''> Merci de bien vouloir saisir l\'objet");
 
		$('#submitDevis').attr("id", "noSubmit");
		$('#noSubmit').attr("disabled","disabled");
 
		objet = false;
 
	} else {
		$(this).next().show().html("<img src='templates/images/check-vert.png''>");
 
		objet = true;
 
		if (budget && mail && messageContact && cahierCharge) {
			$('#noSubmit').attr("id", "submitDevis");
			$('#submitDevis').removeAttr("disabled");         
		}
	}
});