Cumuler plusieurs identifiants

Version imprimable

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

Citation:

Envoyé par Erwan31

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

Dans ce cas de figure, l'attribut href étant prioritaire, la soumission du formulaire ne peut avoir lieu si une URL est présente.
Il faudrait donc trouver un moyen pour l'enlever et conserver uniquement le javascript:void(0).

Normalement il y a pas de soucis, tu travail sur un moteur de template ou directement sur le code serveur ?

A la limite, tu peux tricher ("fin, pas vraiment) en manipulant le DOM et modifier la valeur de l'attribut href :
Code:

1 2 document.getElementById('valid').href = 'javascript:void(0)'
Enfaite, j'avais oublié un else dans l'instruction (qui remplace le return false; après chaque if).

Au final :
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 function CheckField(formulaire) { var FormRegisterForm = document.forms['RegisterForm']; var FormContactForm = document.forms['ContactForm']; if (formulaire == 'RegisterForm') { document.getElementById('valid').href = 'javascript:void(0)'; alert(document.getElementById('valid').href); if (FormRegisterForm.elements['Email'].value == '') { alert('Adresse email obligatoire !'); FormRegisterForm.elements['Email'].focus(); } else if (FormRegisterForm.elements['CGVDemandeEssai'].checked == false) { alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.'); FormRegisterForm.focus(); } else { FormRegisterForm.submit(); } } if (formulaire == 'ContactForm' ) { document.getElementById('valid').href = 'javascript:void(0)'; alert(document.getElementById('valid').href); if (FormContactForm.elements['EmailCtc'].value == '') { alert('Adresse email obligatoire !'); FormContactForm.elements['EmailCtc'].focus(); } else if (FormContactForm.elements['CGVDemandeEssaiCtc'].checked == false) { alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.'); FormContactForm.elements['CGVDemandeEssaiCtc'].focus(); } else { FormContactForm.submit(); } } }
Et mettre la bonne id du lien de validation pour le formulaire de contact.

03/07/2009, 08h29
SpaceFrog

y'a un code dans les contribution sur la validation des forms tu devrais peut être t'en inspirer ?

Pour améliorer, tu peux aussi utiliser la méthode search() afin de vérifier que le mail est bien sous la forme mail@mail.domaine, parce que là, même un espace peut valider le formulaire :

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
 
function CheckField(formulaire) {
 
	var FormRegisterForm = document.forms['RegisterForm'];
	var FormContactForm = document.forms['ContactForm'];
	var wEmailCtc = FormContactForm.elements['EmailCtc'].value;
	var wEmail = FormRegisterForm.elements['Email'].value;
 
 
	if (formulaire == 'RegisterForm') {
		document.getElementById('valid').href = 'javascript:void(0)';
 
		if (wEmail.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1) {
			alert('Adresse email obligatoire !');
			FormRegisterForm.elements['Email'].focus();
		}
		else if (FormRegisterForm.elements['CGVDemandeEssai'].checked == false) {
			alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
			FormRegisterForm.focus();
		}
		else {
			FormRegisterForm.submit();
		}
	}
 
	if (formulaire == 'ContactForm' ) {
		document.getElementById('valid2').href = 'javascript:void(0)';
 
		if (wEmailCtc.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1) {
			alert('Adresse email obligatoire !');
			FormContactForm.elements['EmailCtc'].focus();
		}
 
		else if (FormContactForm.elements['CGVDemandeEssaiCtc'].checked == false) {
			alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
			FormContactForm.elements['CGVDemandeEssaiCtc'].focus();
		}
		else {
			FormContactForm.submit();
		}
	}
 
}

Voilà ;)

03/07/2009, 10h51
franculo_caoulene

Excusez moi d'intervenir, mais de ce que je comprends du code de Macmillenium un comportement agaçant pour l'utilisateur peut arriver.

L'utilisation de else if exclut les conditions entre elles. Ce qui veut dire que si l'utilisateur saisit mal son adresse email et ne coche pas la case des CGV, il aura d'abord une alerte concernant l'email, puis une seconde alerte concernant les CGV après correction de l'adresse email.
Ce n'est peut-être pas le cas ici, mais imaginez un formulaire d'une dizaine de champs comportant cinq erreurs. On se prendrait cinq alertes en cliquant cinq fois sur le bouton de soumission.

Il ne faudrait utiliser que des if, concaténer les messages d'erreur et éventuellement oublier l'utilisation de focus.

Le top étant d'intégrer ces marques d'erreur dans le DOM et non dans des alertes.

Ceci n'est qu'un avis.
03/07/2009, 11h02
Macmillenium

Citation:

Envoyé par franculo_caoulene

L'utilisation de else if exclut les conditions entre elles. Ce qui veut dire que si l'utilisateur saisit mal son adresse email et ne coche pas la case des CGV, il aura d'abord une alerte concernant l'email.

C'est l'objectif, afficher les alertes successivement est un peu pénible surtout dans le cas d'un long formulaire, imagine si le visiteur veut quitter le site ?
03/07/2009, 11h07
franculo_caoulene

Citation:

Envoyé par Macmillenium

C'est l'objectif, afficher les alertes successivement est un peu pénible surtout dans le cas d'un long formulaire, imagine si le visiteur veut quitter le site ?

Je ne comprends pas le but. Je propose de concaténer tous les message et de n'afficher qu'une alerte. Dans ton script une alerte s'affiche à chaque tentative de soumission échouée, c'est ça le but?

Salut,
remarque pertinente franculo caoulene mais je doute que quelqu'un valide sans rentrer son email à moins d'être complètement idiot donc je préfère pas m'embêter avec ça.

Merci encore Macmillénium, oui j'avais bien conscience de cette défaillance (format email) mais comme je suis une grosse bille en JS, je m'en suis tenu au strict minimum, je vais quand même essayer avec ton code :)

Voila le code qui fonctionnait pour la validation, je pense que tu a dû oublier le code du onclick de la checkbox non? :
Code:

1 2 <input id="CGVDemandeEssaiCtc" class="nobrd" name="CGVDemandeEssaiCtc" type="checkbox" value="cgu" style="vertical-align:middle;" onclick="document.forms['ContactForm'].elements['URL'].value='fr/ContactSubmitted.htm'" /> <a onclick="document.forms['ContactForm'].submit();" href="#" class="btn right" id="valid2">

03/07/2009, 11h10
Macmillenium

Citation:

Envoyé par franculo_caoulene

Je propose de concaténer tous les message et de n'afficher qu'une alerte

Ah, j'avais mal compris alors (afficher toutes les alertes lors du submit), oui c'est encore une amélioration ;)

Citation:

Envoyé par Erwan31

Voila le code qui fonctionnait pour la validation, je pense que tu a dû oublier le code du onclick de la checkbox non? :

Code:

1
2
<input id="CGVDemandeEssaiCtc" class="nobrd" name="CGVDemandeEssaiCtc" type="checkbox" value="cgu" style="vertical-align:middle;" onclick="document.forms['ContactForm'].elements['URL'].value='fr/ContactSubmitted.htm'" />
<a onclick="document.forms['ContactForm'].submit();" href="#" class="btn right" id="valid2">

Code:

1
2
 
<a onclick="return CheckField('ContactForm')" href="javascript:void(0)" class="btn right" id="valid2" style="margin-right:19%">

Et dans la fonction JS :

Code:

1
2
3
4
 
	if (formulaire == 'ContactForm' ) {
		document.getElementById('valid2').href = 'javascript:void(0)';
...

03/07/2009, 11h24
franculo_caoulene

Citation:

Envoyé par Erwan31

remarque pertinente franculo caoulene mais je doute que quelqu'un valide sans rentrer son email à moins d'être complètement idiot donc je préfère pas m'embêter avec ça.

Je sais que tu touches ta bille en CSS et que tu dois aimer coder de façon propre (respect des standards). il ne faudrait pas perdre cette optique pour le javascript. Ce que je propose est une bonne pratique, autant la mettre en place aujourd'hui, ainsi tu sauras la mettre en place demain.
03/07/2009, 11h43
Macmillenium

Citation:

Envoyé par franculo_caoulene

Ce que je propose est une bonne pratique

Intéressant, mais dans ta proposition franculo_caoulene :

Citation:

Je propose de concaténer tous les message et de n'afficher qu'une alerte.

- Une alerte qui signale tous les champs non renseignés ?
- Une simple alerte qui signale simplement que l'un des champs n'est pas renseigné ?

Si c'est le 1er cas, OK je suis d'accord mais si c'est le 2éme, alors là il ne s'agit pas forcément d'une bonne pratique mais d'un choix à faire :)
03/07/2009, 11h46
franculo_caoulene

La bonne pratique serait de ne pas utiliser d'alerte du tout et d'intégrer les messages dans le DOM.

Mais bon, on pinaille là :)
03/07/2009, 11h48
Macmillenium

Citation:

Envoyé par franculo_caoulene

La bonne pratique serait de ne pas utiliser d'alerte du tout et d'intégrer les messages dans le DOM.

Là, je suis entièrement d'accord avec toi, le code proposé n'est qu'une simple évolution d'une idée de départ (et bien tenté Erwan31).
03/07/2009, 12h16
Erwan31

Merci Macmillénium t'es un chef, je vais essayer ton code ;)

Citation:

Envoyé par franculo_caoulene

Je sais que tu touches ta bille en CSS et que tu dois aimer coder de façon propre (respect des standards). il ne faudrait pas perdre cette optique pour le javascript. Ce que je propose est une bonne pratique, autant la mettre en place aujourd'hui, ainsi tu sauras la mettre en place demain.

Oui je sais bien qu'il va falloir que je m'y mette malgré mon peu d'attirance pour
la prog :/ (j'ai plutôt un profil de graphiste à la base)

Mais en quoi les alert sont problématiques?
03/07/2009, 12h29
franculo_caoulene

Ce n'est pas problématique, juste moche et ennuyeux. C'est une question d'expérience utilisateur. Que trouves-tu le plus agréable :
- Une ou plusieurs alertes qui s'affichent, te bloquent et disparaissent. on peut donc oublier les erreurs à corriger.
- Des messages intégrés dans le document (mise en forme cohérente), ne te bloquant pas, indiquant les champs à corriger de façon claire et "persistante" (par un astérisque ou un message à coté du champ à corriger).

Maintenant ce n'est pas nécessaire, c'est juste mieux.
03/07/2009, 12h40
Erwan31

Citation:

Envoyé par franculo_caoulene

- Des messages intégrés dans le document (mise en forme cohérente), ne te bloquant pas, indiquant les champs à corriger de façon claire et "persistante" (par un astérisque ou un message à coté du champ à corriger).

Maintenant ce n'est pas nécessaire, c'est juste mieux.

Merci du conseil mais malheureusement je n'ai pas le temps pour ça. Je m'y attaquerai la prochaine fois.

Macmillénium le code que tu me donnes est identique à celui que tu m'a précédemment montré mais je vais essayer de voir ce que je peux faire avec ce code serveur (c'est pas moi qui ai la main dessus)

Citation:

Envoyé par Erwan31

Macmillénium le code que tu me donnes est identique à celui que tu m'a précédemment montré mais je vais essayer de voir ce que je peux faire avec ce code serveur (c'est pas moi qui ai la main dessus)

Normalement tu ne devrais pas avoir de problème avec
document.getElementById('valid').href = 'javascript:void(0)';
et
document.getElementById('valid2').href = 'javascript:void(0)';

L'alert du href donne quoi ?

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
function CheckField(formulaire) {
 
	var FormRegisterForm = document.forms['RegisterForm'];
	var FormContactForm = document.forms['ContactForm'];
	var wEmailCtc = FormContactForm.elements['EmailCtc'].value;
	var wEmail = FormRegisterForm.elements['Email'].value;
	
	 
	if (formulaire == 'RegisterForm') {
		document.getElementById('valid').href = 'javascript:void(0)';
                alert(document.getElementById('valid').href);
		
		if (wEmail.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1) {
			alert('Adresse email obligatoire !');
			FormRegisterForm.elements['Email'].focus();
		}
		else if (FormRegisterForm.elements['CGVDemandeEssai'].checked == false) {
			alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
			FormRegisterForm.focus();
		}
		else {
			FormRegisterForm.submit();
		}
	}
 
	if (formulaire == 'ContactForm' ) {
		document.getElementById('valid2').href = 'javascript:void(0)';
                alert(document.getElementById('valid2').href);
 
		if (wEmailCtc.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1) {
			alert('Adresse email obligatoire !');
			FormContactForm.elements['EmailCtc'].focus();
		}
		
		else if (FormContactForm.elements['CGVDemandeEssaiCtc'].checked == false) {
			alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
			FormContactForm.elements['CGVDemandeEssaiCtc'].focus();
		}
		else {
			FormContactForm.submit();
		}
	}
 
}

Sinon, une mise à jour de la page en ligne pour jeter un coup d'œil.

03/07/2009, 13h35
Erwan31

C'est mise à jour.
Super, excepté le message javascript void de début, ça a l'air de fonctionner MAIS bizarrement ça ne marche que sur la page contact!

Il faut déplacer la déclaration des variables à l'intérieur des instructions (si jamais l'un des forms manque, ça pose un problème), tu peux enlever les alertes c'était juste pour tester ;)

Le code final :

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) {
 
	if (formulaire == 'RegisterForm') {
		var FormRegisterForm = document.forms['RegisterForm'];
		var wEmail = FormRegisterForm.elements['Email'].value;
 
		document.getElementById('valid').href = 'javascript:void(0)';
 
		if (wEmail.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1) {
			alert('Adresse email obligatoire !');
			FormRegisterForm.elements['Email'].focus();
		}
		else if (FormRegisterForm.elements['CGVDemandeEssai'].checked == false) {
			alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
			FormRegisterForm.focus();
		}
		else {
			FormRegisterForm.submit();
		}
	}
 
	if (formulaire == 'ContactForm' ) {
		var FormContactForm = document.forms['ContactForm'];
		var wEmailCtc = FormContactForm.elements['EmailCtc'].value;
		document.getElementById('valid2').href = 'javascript:void(0)';
 
		if (wEmailCtc.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1) {
			alert('Adresse email obligatoire !');
			FormContactForm.elements['EmailCtc'].focus();
		}
 
		else if (FormContactForm.elements['CGVDemandeEssaiCtc'].checked == false) {
			alert('Vous devez accepter les conditions générales obligatoire pour pouvoir poursuivre.');
			FormContactForm.elements['CGVDemandeEssaiCtc'].focus();
		}
		else {
			FormContactForm.submit();
		}
	}
 
}

03/07/2009, 14h37
Erwan31

Un grand merci Macmillénium pour ton aide, ça marche nickel :)
Il y a encore un petit problème : quand je fais un back et que je reviens sur la page contact, les champs sont effacés. Je vais essayé de trouver ce qui cloche.

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