Discussion :

[Macmillenium]

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

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

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

[SpaceFrog]

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

[Macmillenium]

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

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

[Macmillenium]

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 ?

[franculo_caoulene]

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?

[Erwan31]

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 :

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

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

[Macmillenium]

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

[Macmillenium]

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

Code :

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

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 :

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

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 :

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

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

[franculo_caoulene]

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.

[Macmillenium]

Ce que je propose est une bonne pratique

Intéressant, mais dans ta proposition franculo_caoulene :

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

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

[Macmillenium]

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

[Erwan31]

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

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?

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

[Erwan31]

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

[Macmillenium]

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 :

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

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

[Macmillenium]

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 :

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) {
 
	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();
		}
	}
 
}

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