Cumuler plusieurs identifiants

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,
j'aimerais ajouter un id à Email (puisqu'il y a un autre champs sur lequel je dois appliquer la condition) mais les syntaxes ['Email, EmailCtc'] ou ['Email','EmailCtc'] ne fonctionnent pas. Je suppose que c'est plus compliqué?
Code:

1 2 3 4 5 6 7 8 function CheckField(){ if (document.forms['RegisterForm'].elements['Email'].value == '') { alert('Adresse email obligatoire !'); document.forms['RegisterForm'].elements['Email'].focus(); return false; }
Est ce que la synatxe actuelle vous semble correcte?

01/07/2009, 15h29
gwyohm

Avec cette syntaxe

Code:

document.forms['RegisterForm'].elements['Email']

Email est l'attribut name de ton controle (input, select, ...). Si tu as plusieurs controles qui ont le même nom, tu obtiens un tableau.
Si tu veux passer par l'id,

Code:

document.getElementById(id);

Comme les IDs doivent être uniques, tu n'obtiens bien qu'un élément
01/07/2009, 15h49
Erwan31

Ok c'est l'attribut name en effet. Est ce que je peux donc factoriser ma condition avec plusieurs name?
01/07/2009, 16h00
SpaceFrog
soit tu reste avec les names en sachant que

Code:

document.forms['RegisterForm'].elements['Email']

retourne une collection
Code:

1 2 3 4 document.forms['RegisterForm'].elements['Email'][0] document.forms['RegisterForm'].elements['Email'][1] ../..
soit tu te rabats sur un nommage rationnel avec des ids
Code:

1 2 3 4 id="Email1" id="Email2" ../..
un id de fant être unique sur la page
et tu utilise un petit code fourni dans les contributions
getElement(s)ById
http://www.developpez.net/forums/d75...filtre-regexp/

Merci SpaceFrog.
Avant de poursuivre je précise que je suis un grand débutant du JS et que je ne connais pas grand chose à la syntaxe.
Voila ce que j'ai déclaré mais ça ne fonctionne pas.
Code:

1 2 3 4 5 6 7 8 9 if ( document.forms['RegisterForm'].elements['Email'][0].value == '' document.forms['RegisterForm'].elements['EmailCtc'][1].value == '') { alert('Adresse email obligatoire !'); document.forms['RegisterForm'].elements['Email'].focus(); document.forms['RegisterForm'].elements['EmailCtc'].focus(); return false; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
if (
	document.forms['RegisterForm'].elements['Email'][0].value == '' ||
	document.forms['RegisterForm'].elements['EmailCtc'][0].value == '')
// Tu n'as qu'un champ EmailCtc, non ?
	  {
    alert('Adresse email obligatoire !');
    document.forms['RegisterForm'].elements['Email'].focus();
    document.forms['RegisterForm'].elements['EmailCtc'].focus();
    // Supprime une des deux lignes au dessus : tu donnes le focus à Email et immédiatement après à EmailCtc
    return false;
  }

Sinon, tu peux donner un attribut class à tes éléments mail, et faire appel à la fonction getElementsByClassName() pour les récupérer dans un tableau (fonction ci-dessous à copier dans ton code Javascript) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getElementsByClassName(className, tag, elm){ var testClass = new RegExp("(^|s)" + className + "(s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i ]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; }
(Code trouvé ici => http://communaute.medialibs.com/forum/topic-652.html)

Fonction testée sous Unix, mais normalement ça devrait aussi marcher sous Windows.

Citation:
Envoyé par gwyohm
Code:

1 2 3 4 5 6 7 8 9 10 11 12 if ( document.forms['RegisterForm'].elements['Email'][0].value == '' || document.forms['RegisterForm'].elements['EmailCtc'][0].value == '') // Tu n'as qu'un champ EmailCtc, non ? { alert('Adresse email obligatoire !'); document.forms['RegisterForm'].elements['Email'].focus(); document.forms['RegisterForm'].elements['EmailCtc'].focus(); // Supprime une des deux lignes au dessus : tu donnes le focus à Email et immédiatement après à EmailCtc return false; }
Oui un seul champ EmailCtc mais chaque champs a aussi un id avec le même nom donc ils doivent être uniques:

Code:

<input type="text" name="EmailCtc" id="EmailCtc" size="25" maxlength="40" class="txt" value="{$Email}" />

Ton code ne marche pas et je ne comprends pas bien ta deuxième remarque.
La page en question.

@_jey_ Merci mais je suis bien incapable de fusionner cette fonction avec la fonction checkfield sans faire d'erreur de syntaxe ou de logique :-/

01/07/2009, 18h51
gwyohm
Je comprends mieux ton problème ; tes champs Email et EmailCtc ne sont pas dans le même formulaire.
Code:

1 2 3 if(document.forms['RegisterForm'].elements['Email'].value == '' || document.forms['ContactForm'].elements['EmailCtc'].value == '')
Et visiblement s'il n'y a qu'un élément il ne faut pas spécifier l'index...

Cependant, il reste à mon avis un problème fonctionnel :
Quand on s'apprête à soumettre un formulaire (sur les 2 différents), les 2 formulaires sont validés.

Ma remarque du post précédent était juste pour signaler que tu donnais le focus à chacun des champs. Or à un instant t un seul champ peut avoir le focus.
01/07/2009, 19h43
Erwan31

Ah ben oui forcément :oops: Merci ça marche! :)

Autre problème:

Depuis que j'ai ajouté l'appel à la fonction checkfield dans le onclick, la fonction de submit n'est plus prise en compte et se trouve remplacée par la lien href (#):
(je ne malheureusement pas passer l'appel dans le href via un javascript:...)

Code:

<a onclick="return CheckField(); document.forms['RegisterForm'].submit();" href="#"
02/07/2009, 09h07
andry.aime

Salut,
C'est due au return false dans la fonction CheckField().
02/07/2009, 09h53
gwyohm

Citation:

C'est due au return false dans la fonction CheckField().

Non, c'est du au fait que l'instruction de soumission du formulaire ne peut pas être atteinte :

Code:

<a onclick="return CheckField(); document.forms['RegisterForm'].submit();" href="#"

Il y a un return sur la premiere instruction.
Par contre il faut s'assurer que CheckField renverra true quand il n'y a pas d'erreur et tu pourras faire

Code:

<a onclick="if( CheckField() ) { document.forms['RegisterForm'].submit()};" href="#"
02/07/2009, 10h49
Erwan31

Si je supprime les returni false ou que je met ton code (sans le return donc) gwyohm, la suite des instruction s'enchaine (une fois que j'ai validé la première alerte pour OK, la deuxième apparait etc.
02/07/2009, 10h56
SpaceFrog
J'ai cru lire plus haut que si il n'y avait qu'un seul element de même name sur la page ou dans le form on pouvait se passer des indexes ..

Je dois contredire cette information.
getElementsByName retourne une collection, meêm si celle ci ne comporte qu'un seul élément il faut passer par les indexes:
Code:

1 2 3 4 5 6 7 8 <body> <input name="myname" /> </body> <script> alert(document.getElementsByName('myname').name)//undefined alert(document.getElementsByName('myname')[0].name)//myname </script>

Citation:

Envoyé par SpaceFrog

J'ai cru lire plus haut que si il n'y avait qu'un seul element de même name sur la page ou dans le form on pouvait se passer des indexes ..

Je dois contredire cette information.
getElementsByName retourne une collection, meêm si celle ci ne comporte qu'un seul élément il faut passer par les indexes:

Je parlais de document.forms["formName"].elements["jambon"] et non de getElementsByName.
Si je n'ai qu'un champ "jambon" dans mon formulaire, document.forms["formName"].elements["jambon"][0] me renvoie undefined
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html><head><title></title></head> <body> <form name="form1"> <input type="text" name="jambon"/> <input type="button" onclick="alert(document.forms['form1'].elements['jambon'][0]);"/> </form> <hr/> <form name="form2"> <input type="text" name="jambon"/> <input type="text" name="jambon"/> <input type="button" onclick="alert(document.forms['form2'].elements['jambon'][0]);"/> </form> </body> </html>

02/07/2009, 11h28
gwyohm

Citation:

Envoyé par Erwan31

Si je supprime les returni false ou que je met ton code (sans le return donc) gwyohm, la suite des instruction s'enchaine (une fois que j'ai validé la première alerte pour OK, la deuxième apparait etc.

Je ne comprends pas bien ton problème

Salut,

Ce qui pose un problème dans ton code :

Code:

1
2
3
4
5
6
7
8
 
if(document.forms['RegisterForm'].elements['Email'].value == '' ||
document.forms['ContactForm'].elements['EmailCtc'].value == '')	  
	{
    alert('Adresse email obligatoire !');
    document.forms['RegisterForm'].elements['Email'].focus();
    return false;
  }

Email reçoit toujours le focus, même s'il s'agit de EmailCtc

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
if (document.forms['RegisterForm'].elements['CGVDemandeEssai'].checked == false)
  {
    alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
    document.forms['RegisterForm'].elements['CGVDemandeEssai'].focus();
    return false;
  }
 
if (document.forms['ContactForm'].elements['CGVDemandeEssaiCtc'].checked == false)
  {
    alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
    document.forms['ContactForm'].elements['CGVDemandeEssaiCtc'].focus();
    return false;
  }
 
  return true;
}

Ici, le test sera effectué sur les deux champs CGVDemandeEssai et CGVDemandeEssaiCtc => tu auras toujours une alerte si l'un des checkbox n'est pas coché et quelque soit le formulaire.

Si tu veux garder une seule fonction, alors il faudrait :

Passer des paramètres à la fonction afin de connaitre le formulaire dans lequel on se trouve;
Regrouper les instructions en fonction du paramètre passé;
Valider le formulaire si tout est OK

Ce qui donne (pas testé mais normalement c'est bon) :

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
 
function CheckField(formulaire){
 
var FormRegisterForm = document.forms['RegisterForm'];
var FormContactForm = document.forms['ContactForm'];
 
if (formulaire == 'RegisterForm') {
	alert('Je suis RegisterForm');
	if (FormRegisterForm.elements['Email'].value == '') {
		alert('Adresse email obligatoire !');
		FormRegisterForm.elements['Email'].focus();
	}
 
	if (FormRegisterForm.elements['CGVDemandeEssai'].checked == false) {
		alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
		FormRegisterForm.focus();
	}
	else {
		alert('Prêt pour le submit');
		FormRegisterForm.submit();
	}
}
 
 
if (formulaire == 'ContactForm' ) {
	alert('Je suis ContactForm');
	if (FormContactForm.elements['EmailCtc'].value == '') {
		alert('Adresse email obligatoire !');
		FormContactForm.elements['EmailCtc'].focus();
	}
 
	if (FormContactForm.elements['CGVDemandeEssaiCtc'].checked == false) {
		alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
		FormContactForm.elements['CGVDemandeEssaiCtc'].focus();
	}
	else {
		alert('Prêt pour le submit');
		FormContactForm.submit();
	}
}
 
}

Dans le html :

Code:

1
2
3
 
<a onclick="return CheckField('RegisterForm')" href="javascript:void(0)" ...
<a onclick="return CheckField('ContactForm')" href="javascript:void(0)" ...

Tout est transféré dans le JS, par contre remplace le # par javascript:void(0) sinon la validation sera bloqué.

[EDIT] : Au passage, dans la fonction :

Code:

1
2
3
4
5
 
function toggle (idDetail) {
	var style = document.getElementById(idDetail).style;
	style.display = (style.display == "none") ? "" : "none";
}

style est un objet réservé au DOM, évite de le déclarer comme variable ;)

02/07/2009, 17h56
Erwan31

Code:

Je ne comprends pas bien ton problème

Pas grave je vais partir sur le code de Macmillenium ;)

Merci Macmillenium pour ce nouveau code :ccool: mais ça ne marche comme il faudrait. :/
Une fois les 2 alert validées, le lien javascript:void est lancé, hors il ne devrait y avoir aucune redirection après validation des alertes.
Même chose si tout est validé, ça pointe vers : http://www.deloslabs.com/fr/javascript:void(0)
02/07/2009, 17h58
Macmillenium
Citation:

Envoyé par Erwan31

Une fois les 2 alert validées, le lien javascript:void est lancé, hors il ne devrait y avoir aucune redirection après validation des alertes.
Même chose si tout est validé, ça pointe vers : http://www.deloslabs.com/fr/javascript:void(0)

Pourrais tu mettre à jour la page en ligne stp ?

[EDIT] :
Firebug me donne ceci :
Code:

1 2 <a id="valid" class="btn right" href="http://www.deloslabs.com/fr/javascript:void(0)" onclick="return CheckField('RegisterForm')"><span class="lft" />Valider<span class="rgt"></span></a>
Il faut uniquement laisser javascript:void(0), tu as peut-être un code serveur qui te génère cette url ?

N'oublie pas de rajouter l'id au RegisterForm:
Code:

1 2 <form action="" style="padding-top: 1.5em;" class="separ" name="RegisterForm" id="RegisterForm" method="post">
Pour ContactForm, tu as un document.forms['ContactForm'].submit(); qui traine, inutile comme on a tout transféré dans le JS ;) :
Code:

1 2 <a style="margin-right: 19%;" id="valid2" class="btn right" href="javascript:void(0)" onclick="return CheckField();">
02/07/2009, 18h39
Erwan31

Oui il y a un code serveur qui s'ajoute automatiquement.

Ok merci j'avais en effet oublié l'id registerform, quant au formaulaire de contact c'est normal je ne m'en suis pas encore occupé.

Voila la page : http://fr.delos.us/DelosBin/Delos.dl...233708&Track=0

Voir 40 message(s) de cette discussion en une page