Discussion :

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

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

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 :

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

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 :

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

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 :

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

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

retourne une collection

Code :

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

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 :

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

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 :

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

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 :

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

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 :

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

Code :

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

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 :

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

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

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

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 :

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

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

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

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

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

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

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

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]

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 :

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

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]

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 :

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

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 :

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

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

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

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 :

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

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 :

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

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]

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 :

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

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 :

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

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 :

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

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