Discussion :

[Iceman Y15]

Bonsoir à tous, voilà quelques heures que je tourne sur la toile, et principalement en rond alors je sollicite votre aide:
Ayant un formulaire php/html à remplir je dois vérifier les champs. J'utilise le JavaScript pour valider. Chaque champ au préalable valider par des fonctions AJAX, il apparait à coté une image de tick box sous la forme HTML:

Code :

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

 <img id="13" alt=""></img>

Dont l'attribut scr est définit comme suit:

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
 
/* Fonction de test des champs de texte obligatoires */
function check_empty_text($idCheckBox,$elt)
{
	$reponse = new xajaxResponse();
	if ($elt != NULL)
	{
		$reponse->assign($idCheckBox, 'src', "images/iconCheckBox.jpg");
	}
	else
	{
		$reponse->assign($idCheckBox, 'src',"images/cross.png");
	}
 
	return $reponse;
}

J'aimerais que ma fonction JavaScript de vérification globale vérifie ou non la présence de croix rouge (champs invalides) donc je code ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function check_form(nbBox)
{
	for ($i = 1 ; $i <= nbBox ; $i++)
		{
			if(document.getElementById($i).src == "images/cross.png")
			{
                             alert("Les champs comportant une * sont obligatoires");
                             return 0;
                        }
		}
	return 1;
}

Mon code JS ne fonctionne pas car il me renvois rien lorsque je lui de demande d'afficher le getElementById($i). Pourriez-vous m'aider?

edit: Désolé fausse manip un 'tab' + 'enter' et craaaac ^^

[SpaceFrog]

un id ne doit jamais etre intégralelement numérique ni commencer par du numérique

de plus img est une balise autofermante:

Code :

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

<img id="_13" alt="" />

[Iceman Y15]

Merci pour ces corrections, j'ai donc corrigé
de tel sorte:

Code :

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

1
2
 
<img id="im12" alt="" />

Ceci étant pouvons nous concaténer pour obtenir une chaine exploitable par

Code :

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

1
2
 
alert(document.getElementById(xxxxx).src);

Pour arrivé a utiliser ma fonction de vérification.

Mais existerait-il pas une fonction permettant de tester tout les éléments

Code :

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

<img ..../>

D'une page, ce qui me simplifierait grandement la tâche.

[SpaceFrog]

j'ai proposé il y a quelque temps un script pour recupérer un ensemble d'id genre "commençant par ..." "finissant par " etc


plus classiquement

dans une boucle sur i

Code :

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

document.getElementById('img'+ i)

sinon avec a puissance des selecteurs de jquery ...

[Loceka]

Accessoirement c'est pas bien du tout de vérifier si le formulaire est bon en testant si telle ou telle image est chargée.

Si un jour tu ne veux plus mettre d'image ou que l'URL change personne ne se souviendra que la fonction de vérification s'en servait.

Si le formulaire est pré-validé par des fonctions AJAX, alors c'est à ce niveau-là qu'il faut faire la vérification (maintenir une liste des champs valides/non valides par exemple).

[SpaceFrog]

j'ai retrouvé le post
http://www.developpez.net/forums/d75...p/#post4389063

[Iceman Y15]

Merci!!!!! Tout ça parceque à force de programmer en 3 langages différents je met des "$" n'importe où.

MErci.

Si, dernière petite précision, pour tester l'attribut 'src' , lorsque je l'affiche il m'affiche le chemin complet, ce qui est normal. Pourrais-je tester le nom qu'à partir de ma racine?

Code :

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

1
2
3
4
5
6
 
if(document.getElementById('im'+i).src == "./images/cross.png")
				{
				alert("Les champs comportant une * sont obligatoires");
				return 0;
				}

Ceci ne fonctionne pas je l'ai essayer.
Cordialement

[SpaceFrog]

Code :

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

if(/cross.png$/.test(document.getElementById('im'+i).src))

[Iceman Y15]

Merci Spacefrog! Maintenant l'idée de Loceka est vraiment pas mauvaise et j'y avais pensé mais comment la mettre en oeuvre.
@Loceka: Je t'ai envoyé un MP pour ça!

[Loceka]

tu as écrit:

Accessoirement c'est pas bien du tout de vérifier si le formulaire est bon en testant si telle ou telle image est chargée.

Si un jour tu ne veux plus mettre d'image ou que l'URL change personne ne se souviendra que la fonction de vérification s'en servait.

Si le formulaire est pré-validé par des fonctions AJAX, alors c'est à ce niveau-là qu'il faut faire la vérification (maintenir une liste des champs valides/non valides par exemple).

Cette méthode m'interresse mais je ne voyais pas comment l'utiliser. Existe t'il en javascript une fonction qui insérerais un objet dans une liste si il n'existe pas et qui supprimerais pas s'il n'existe pas?

Le seul moyen de vérifier si un élément est contenu dans une liste est, à ma connaissance, de parcourir cette liste et de faire le test soi-même.

Ceci dit dans ton cas, étant donné que tous les champs de ton formulaire sont différents tu n'as pas à t'inquiéter de ça.

Personnellement je ferais un truc comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// Déclaration d'une variable globale contenant le tableau :
var champs = new Array();
 
// Après l'appel à ton ajax :
var tonChamp = document.getElementById("le_champ"); // Récupérer le champ désiré dans une variable, ou bien juste son id, ou son nom
champs[tonChamp] = true/false; // true ou false en fonction de sa validité
 
// Dans la fonction de validation :
var formOk = true;
for (var champ in champs) {
  formOk &= champs[champ];
}

[Iceman Y15]

Je comprend ce que tu fais mais pourrais tu me préciser dans quel fichier chacune de tes instructions que tu me propose dois-je les faire apparaitre?

[Loceka]

Eh bien la ligne var champs = new Array(); est une déclaration de variable globale et doit donc être fait directement à la racine du script (pas dans une fonction) et avant tout appel de fonction.

Le code que j'ai dit devoir se trouver // Après l'appel à ton ajax doit se trouver dans la fonction qui récupère la réponse du serveur (check_empty_text si j'ai bien compris)

Le code que j'ai dit devoir se trouver // Dans la fonction de validation doit se trouver... dans la fonction de validation \o/ (check_form apparement)

Après comme nous n'avons pas la structure de ton document je ne peux pas t'en dire plus.

[Iceman Y15]

La structure de mon code:

un fichier php fct_ajax.php dans lequel je définis toutes mes fonctions pour les utiliser via xAJAX.
Dans ce fichier se trouve

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function check_empty_text($idCheckBox,$elt)
{
	$reponse = new xajaxResponse();
	if ($elt != NULL)
	{
		$reponse->assign($idCheckBox, 'src', "images/iconCheckBox.jpg");
	}
	else
	{
		$reponse->assign($idCheckBox, 'src',"images/cross.png");
	}
	return $reponse;
}

Ensuite un fichier script_verif_form.js
qui contient:

Code :

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

1
2
3
 
function check_form(nbBox)
{}

Et enfin le fichiers formulaire.php ou se trouve le formulaire avec au début du code:

Code :

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

1
2
3
4
 
<?php
$xajax->printJavascript(); 
?>

Dois-je donc placer

Code :

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

var champs = new Array();

dans le fichier script_verif_form.js en dehors de toute déclaration? Pour ce qui est de

// Après l'appel à ton ajax

dois t'il se trouver effectivement dans la fonction xAJAX ou bien doit il être positionner entre des balises scripts sur le formulaire.php?

[Loceka]

Oulà...

Alors déjà tout ce qui est PHP est exécuté par ton serveur, tout ce qui est javascript est exécuté par le client (le navigateur).

Ici on fait du javascript, donc la seule chose qui nous intéresse sont les scripts et les fonctions javascript. Les fichiers PHP ne nous concernent pas, ce qu'on fait dedans non plus : le javascript n'en a aucune idée et le navigateur non plus.

Le mieux serait que tu postes le code HTML généré (clic droit, code source).

[Iceman Y15]

Voici le début et je pense l'utile poiur toi. Si jamais il y avait quelque chose qu'il te manque dit le moi:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script type="text/javascript" src="js/script_verif_form.js" ></script> 
	<script type="text/javascript" src="js/fctGlob.js"></script>
 
	<title>DoctGest</title>
	<meta name="description" content="DoctGest">
	<meta name="author" content="************">
 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="stylesheet" href="css/style.css?v=2">
 
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
 
	</head>
<body>
	<div id="header-container">
		<header class="wrapper">
			<h1 id="title">DoctGest</h1><!--<img src=images/logo.png>-->
 
					<nav>
						<ul>
							<li><a href="index.php?killsession=1">Deconnecter</a></li>
 
							<li><a href="menu_DR.php">Menu</a></li>
							<li><a href=''>Recherche</a></li>
						</ul>
					</nav>		</header>
	</div>
 
	<div id="main" class="wrapper">
 
		<div id="main" class="wrapper"> 
 
 
			<h2>Inscription</h2>
 
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "http://127.0.0.1:8888/DoctGest_project/form_gene_aff.php";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.legacy = false;
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "POST";
/* ]]> */
</script>
<script type="text/javascript" src="xajax/xajax_js/xajax_core.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
window.setTimeout(
 function() {
  var scriptExists = false;
  try { if (xajax.isLoaded) scriptExists = true; }
  catch (e) {}
  if (!scriptExists) {
   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: xajax/xajax_js/xajax_core.js");
  }
 }, 2000);
/* ]]> */
</script>
 
<script type='text/javascript' charset='UTF-8'>
/* <![CDATA[ */
xajax_check_empty_date = function() { return xajax.request( { xjxfun: 'check_empty_date' }, { parameters: arguments } ); };
xajax_check_empty_text = function() { return xajax.request( { xjxfun: 'check_empty_text' }, { parameters: arguments } ); };
xajax_disabled_nom_married = function() { return xajax.request( { xjxfun: 'disabled_nom_married' }, { parameters: arguments } ); };
xajax_check_form = function() { return xajax.request( { xjxfun: 'check_form' }, { parameters: arguments } ); };
/* ]]> */
</script>
 
	<body>
	  	<form name="formulaire" method="GET" action="php/file_prerecord.php">
 
	  		<p>
	  		<table id="form_gene_inscr">
	  			<tr>
	  				<td>
	  					<legend>Nom : *</legend>
	  				</td>
	  				<td> 
	  					<input name="Nom" id="Nom" type="text" 
	  					onblur="xajax_check_empty_text('im1',document.getElementById('Nom').value);" 
	  					/><img id="im1" alt="" />
	  				</td>

[Loceka]

OMG si je puis m'exprimer ainsi !

Ton HTML a vraiment 2 body ?

'fin bref, la variable globale doit se trouver dans le fichier script_verif_form.js et le code à exécuter en ajax dans les fonctions xajax_check_empty_text et xajax_check_empty_date.

[Iceman Y15]

Donc après avoir mis dans ma fonction xAJAX :

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
function check_empty_text($idCheckBox,$elt)
{
	$reponse = new xajaxResponse();
	if ($elt != NULL)
	{
		$reponse->assign($idCheckBox, 'src', "images/iconCheckBox.jpg");
		$reponse->script("var tonChamp = document.getElementById('$elt');
							champs[tonChamp] = true;");
	}
	else
	{
		$reponse->assign($idCheckBox, 'src',"images/cross.png");
		$reponse->script("var tonChamp = document.getElementById('$elt');
							champs[tonChamp] = false;");
	}
	return $reponse;
}

Je peut mettre dans check_form() ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function check_form()
{
	var formOk = true;
	for (var champ in champs) *
	{
	  formOk &= champs[champ];
	}
	return formOk;
}

Est-ce correct?

[Loceka]

A priori non. Tu écris du javascript dans du PHP, il n'y a donc aucune raison que ça marche.

[Iceman Y15]

Pour le check_form(), c'est une fonction javascript on est d'accord?

Pour check_empty_text(), ceci est une fonction PHP mais grâce à
xAjax -> script je puis insérer du code javascript dans ma fonction php pour pouvoir l'executer ensuite.

Où se situe donc le javascript qui ne devrais pas être là?