Discussion :

[kululu]

Bonjour les devs

Je vous explique ma situation:

J'ai un code JS qui vérifie un formulaire dans mon "onsubmit"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form class="form" id="form" method="get" onsubmit="return verifForm(this)" action="creation"

Cette methode JS marche parfaitement bien lorsque je clique sur le bouton "send".
Mais l'utilisateur peut rentrer une liste de données: j'ai un code JS qui "clone" mon formulaire sous forme d'onglet. Par exemple si mon formulaire nécessite obligatoirement un nom il faut qu'il soit présent dans le "premier" form et le "clone" form. Le soucis arrive ici puisque le formulaire n'est plus vérifié, il semblerait que la méthode verifForm(this) n'est plus du tout lancé (alors que ce n'est pas le cas si je clone pas le formulaire). J'ai bien fait gaffe de pas avoir des champs id avec la même valeur.

Merci de votre aide

[SpaceFrog]

le clone n'hérite pas des méthodes du form original.

[kululu]

Merci de la réponse

Ce que tu essaies de me dire, c'est que le code JS ne vérifiera pas le code du clone? Pourtant si clone que je laisse tout les champs vide et que je "send" il ne lance pas la vérification (logiquement le premier form devrait être vérifier quand même non?).

Sinon y a t-il une solution à mon problème: Pouvoir dupliquer le formulaire et le soumettre a une vérification avant de le "send" ?

[SpaceFrog]

attribuer les evenements sur le form après le clone ...

[kululu]

Comment on fait ça s'il te plait? *débutant en dev web

[SpaceFrog]

première remarque : mettre en id d'un form "form" est maladroit

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

id="myform"

ensuite

modifie l'id du form après clonage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
newform= document.getElementById('myform').cloneNode(true)

puis attribues les evenements

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 
newform.id="newform"
newform.onsubmit=function(){return verifForm(this)}

[kululu]

Je commence à comprendre l'astuce mais je ne peux pas cloner le form, car en faite je clone juste une petite partie du form en gros:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
<div id="identité">
<input /> 
...
</div>
 
<!-- c est juste ça qui est cloné -->
<div id="autre">
<input />
...
</div>
 
</form>

Donc si je clone tout le form je vais me retrouver avec des choses que je voulais pas cloner.

[SpaceFrog]

tu modifies les id de elements de la partie clonée ?

[kululu]

Oui par du code js comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
	var listeElementsFieldset = elementCloned.getElementsByTagName('fieldset');
	var listeElementsDiv = elementCloned.getElementsByTagName('div');
	var listeElementsInput = elementCloned.getElementsByTagName('input');
	var listeElementsSelect = elementCloned.getElementsByTagName('select');
 
	var inc = 0;
 
	for(var i=0; i< listeElementsDiv.length  ; i++ ) 
	{
 
		listeElementsDiv[i].id="testDiv"+test;
		test++;
 
	} 
 
	for(var i=0; i< listeElementsFieldset.length  ; i++ ) 
	{
 
		listeElementsFieldset[i].id="testFieldset"+test;
		test++;
 
	}
 
	for(var i=0; i< listeElementsInput.length  ; i++ ) 
	{
 
		listeElementsInput[i].id="testInput"+test;
		test++;
 
	} 
 
	for(var i=0; i< listeElementsSelect.length  ; i++ ) 
	{
 
		listeElementsSelect[i].id="testSelect"+test;
		test++;
 
	}

C'est moche mais c'est pour tester (en sachant que ce code ne fonctionne que si je ne créé qu'un seul et unique clone si je créé un 2eme clone il va avoir les même id que le 1er clone)

[SpaceFrog]

sauf si tu incréementes l'id ...

moche peut etre mais pas le choix ...

[SylvainPV]

Je le répète partout mais visiblement c'est loin d'être un réflexe: l'ID n'est pas le seul moyen de sélectionner des éléments en JS !
Element unique statique : ID
Elements multiples dans un conteneur statique : querySelectorAll et ID sur le parent
Elements multiples un peu partout dans le DOM : Classes
Dans tous les cas, un querySelector ne sera jamais un mauvais choix. Ca permet de retrouver le vieux réflexe des règles CSS qui est d'optimiser et sécuriser le sélecteur.

un document.querySelectorAll("#myform .onglet.selected") par exemple résoudra beaucoup de problèmes ici

Après plus précisément si ton problème est que ton code JS ne semble pas se lancer, c'est qu'il y a probablement une erreur Javascript qui interrompt la fonction. Peux-tu vérifier que tu ne vois rien en console d'erreurs Javascript au moment de la soumission du formulaire ?

[SpaceFrog]

querySelectorAll ... pour les navigateurs qui le supportent ...

[kululu]

Aucune erreur dans la console ( j'utilise la console intégré à chrome)

edit: j'ai même tester de réaffecter la balise form à la fin de mon code qui fait le clonage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var newform = document.getElementById("myform");
	newform.id="myform";
	newform.setAttribute("onsubmit","return verifForm(this)");

et ça marche toujours pas

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newform.setAttribute("onsubmit","return verifForm(this)");

ça ne ressemble pas à ce que je t"ai suggéré ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newform.onsubmit=function(){return verifForm(this)}

[kululu]

Donc après mes boucles affreuses j'ai rajouter ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
	var newform = document.getElementById("myform");
	newform.onsubmit=function(){
		return verifForm(this);
		};

et ça marche toujours pas
Je ne sais pas si ça fait avancer les choses mais si j’enlève de la vérification les champs de ma partie clonable le "verifForm" se lance nickel et que je clone ou pas la partie clonable.

EDIT: ça avance, en faite le code est bel est bien lancé (j'ai mis des alert un peu partout)
Dans ma vérification j'ai en gros ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
function verifForm(f){
 
	//Partie qui ne se clone pas
	var patientinitial = textFieldIsValid(f.patientinitial);
	var patientbirthdate = textFieldIsValid(f.patientbirthdate);
	var patientsex = selectIsValid(f.patientsex);
	alert("ici1");
 
	//Partie qui peu se cloner
	var info = textFieldIsValid(f.info);
        alert("ici2");
	var test = textFieldIsValid(f.test);
 
 
	if(...tout le monde est true){
		return true;
	}else{
		return false;
	}
}

Le code sans clonage il marche (cad que le formulaire n'est pas envoyé car les champs ne sont pas valides) on passe par "ici1" et "ici2" quand j'appuie sur send avec tous les champs vides, par contre quand je clone le code passe plus que par "ici1". Pourtant dans le code je ne modifie pas les id de l'élement original. Ce code bien sur ne permet pas de vérifier les champ du clone mais je rappelle que c'est juste pour tester.

[SpaceFrog]

A vrai dire je ne comprends plus grand chose ..

si tu ne clones qu'une partie du form ...
tu ne clones pas le form ... donc newform
n'est pas un form ???


sinon un exemple fonctionnel avec jquery
http://jsfiddle.net/VDYkH/

[kululu]

Dans ton exemple tu clone tout le formulaire.
Dans mon cas j'ai un formulaire ou tu dois rentrer une personne (nom prénom etc) et tu peux lui rajouter des infos et misc ces derniers peuvent être répétés plusieurs fois (on pourrait dire qu'on ai des infos sur son travail puis aussi des infos sur sa santé etc...). Du coup il faut seulement que je clone la seconde partie.

[SpaceFrog]

un peu d'imagination que diable !!!
http://jsfiddle.net/VDYkH/1/

[sekaijin]

Je ne comprends pas tout ce que tu veux faire mais...

onsubmit est une méthode de form
je ne comprends pas pourquoi tu définit dynamiquement une fonction pour appeler la fonction vérif
une affectation est beaucoup plus simple et efficace.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  var newform = document.getElementById("myform");
  newform.onsubmit=verifForm;
  };

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function verifForm(){
 
	//Partie qui ne se clone pas
	var patientinitial = textFieldIsValid(this.patientinitial);
	var patientbirthdate = textFieldIsValid(this.patientbirthdate);
	var patientsex = selectIsValid(this.patientsex);
	alert("ici1");
 
	//Partie qui peu se cloner
	var info = textFieldIsValid(this.info);
        alert("ici2");
	var test = textFieldIsValid(this.test);
 
 
	return (...tout le monde est true);
}

je sais que beaucoup parmis vous n'aime pas ajouter d'attribut au objet du DOM
mais voilà ce que je ferais
à chaque champs du formulaire j'ajouterais une méthode vérif qui vérifie le champs.
la méthode onsubmit du form est alors simple elle fait une boucle sur tout les champs
appelle la méthode vérif de celu-ci et retourne un AND du tout.

ainsi on peut ajouter autant de champs que l'on veut la méthode de vérification est universelle.
au pire on peut ajouter dans la boucle la présence du membre vérif sur le champs pour ne pas avoir à tous les traiter.

dans ce genre j'avais posté un truc il y a quelques années
http://www.developpez.net/forums/d85...s-autoverifes/

A+JYT