Cumuler plusieurs identifiants [Résolu]

[Erwan31]

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?

[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

[Erwan31]

Ok c'est l'attribut name en effet. Est ce que je peux donc factoriser ma condition avec plusieurs name?

[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/

[Erwan31]

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;
  }

[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;
  }

[_jey_]

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.

[Erwan31]

Envoyé par gwyohm

Code :

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 :-/

[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.

[Erwan31]

Ah ben oui forcément 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="#"

[andry.aime]

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

[gwyohm]

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="#"

[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.

[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>

[gwyohm]

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>

[gwyohm]

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

[Macmillenium]

Salut,

Ce qui pose un problème dans ton code :

Code javascript :

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 javascript :

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 javascript :

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 html :

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 javascript :

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

[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 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)

[Macmillenium]

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();">

[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