Appels JS - Portée des fonctions

**informer** · 04/12/2013, 11h42

Bonjour à tous et merci d'avance pour votre aide.

Mon problème est l'appel de fonction qui génère l'erreur Firebug suivante :

ReferenceError: ValidatefrmContact is not defined
if (ValidatefrmContact(document.forms.frmContact) == false)

Possibilité de test

La page en erreur est sur plpconsulting.free.fr/index.php
A contrario, un exemple qui fonctionne parfaitement bien sur le même structure est dispo sur plpconsulting.free.fr/ValidationRules/index.php. Par contre le formulaire directement dans la page

Objectif
Sur la base d'un doc proposé sur developpez.net par G. Donat "Introduction à Ajax et interaction avec PHP", j'envoie des données saisies dans un formulaire HTML au format XML via l'objet XMLHttpRequest (fichier jsSendMail.js) à un fichier PHP (phpSendMail.php) qui envoie par mail les données saisies dans le formulaire HTML.

Dans jsSendMail.js:

fonction jsInitValue

Test des contraintes de validation par appel de la fonction ValidatefrmContact qui est déclarée dans le Header de la page HTML (Voir 3ème bloc de code dans Header)
Récupération des données du formulaire si test validation OK
Appel de jsCallScript

fonction jsCallScript

envoi au format XML par méthode post des données saisies dans le formulaire au fichier phpSendMail.php

Dans phpSendMail.php

Envoi d'un mail avec les données saisies dans le formulaire HTML

Info importante
le formulaire est intégré dans un objet Onglet JQuery (Voir 2ème bloc de code du Header)

Dans Header, il y a :

Code php :

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

<?php include "jsSendEmail.js";?>

Une page avec un objet Onglet (tab) JQuery.

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function()
{
   var jQueryTabs1Opts =
   {
      show: false,
      event: 'click',
      collapsible: false
   };
   $("#jQueryTabs1").tabs(jQueryTabs1Opts);
... Liste des autres contrôles JQuery

Une fonction de contrôle des règles de validations

Code :

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

1
2
3
4
5
6
7
8
9
10
function ValidatefrmContact(theForm)
{   var regexp;
   if (theForm.subject.selectedIndex < 0)
   {
      alert("Saisie incorrecte ou manquante");
      theForm.subject.focus();
      return false;
   }
... autres contrôles
}

Dans body, il y a :

la déclaration du contrôle Onglet avec tous les contrôles associés

Code html :

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

1
2
3
4
5
<div id="jQueryTabs1" style="position:absolute;left:24px;top:66px;width:1391px;height:837px;z-index:176;"> 
 
........ Liste des autres contrôles associés
 
</div>

Et dans le 4ème onglet, un contrôle formulaire

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="wb_frmContact" style="position:absolute;left:49px;top:69px;width:438px;height:730px;z-index:101;">
<form name="frmContact" method="post" action="" enctype="text/plain" id="frmContact" onsubmit="return ValidatefrmContact(this)">
<input type="text" id="firstname" style="position:absolute;left:104px;top:45px;width:313px;height:23px;line-height:23px;z-index:59;" name="name" value="" tabindex="2">
 
... Liste des autres contrôles associés
 
...Et bien sûr le bouton avec even = onclick qui appelle une fonction jsInitValue() du <?php include "jsSendEmail.js";?> (Cf Header
 
<input type="button" id="btSend" onclick="jsInitValue();return false;" name="" value="Envoyé" style="position:absolute;left:322px;top:693px;width:96px;height:25px;z-index:94;" tabindex="18">
</form>

La fonction jsInitValue.js appelle ValidatefrmContact(document.forms.frmContact) et passe en paramètre le formulaire le formulaire frmContact

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
function jsInitValue() {
	if (ValidatefrmContact(document.forms.frmContact) == false) 
	{	var alerte = "opération annulée. Données obligatoires non saisies ou problème de format";
		alert (alerte); 
		return false;
	}
 
	var _subject =  $("#subject option:selected").text();
	var _firstname = $("#firstname").val();
	var _name = $("#name").val();
	var _email = $("#email").val();
	var _message = $("#message").val();
	[... ]
	var _data = "name="+_name+"&firstname="+_firstname+"&email=" +_email+"&message="+_message
	[... ]
 
	// --- Appel au script PHP de traitement
	var _scriptName ="phpSendEmail.php";
	jsCallScript(_scriptName,_data);
	alert("Fin de traitement"); 
}
 
function jsCallScript(scriptName, data) {
 
	var xhr_object = null; 
	if (window.XMLHttpRequest) { xhr_object = new XMLHttpRequest(); }
	else if (window.ActiveXObject) { xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); }
	else
	{ alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		return;
	}
	xhr_object.open("POST", scriptName, true);
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr_object.send(data);
}

**Bovino** · 04/12/2013, 14h13

Que vient faire un include PHP avec un fichier .js ?

**SylvainPV** · 04/12/2013, 19h17

Bonjour,

Mon problème est l'appel de fonction car avec mon code même si elle existe elle n'est pas reconnu.

et elle s'appelle comment cette fonction ? Plutôt qu'une centaine de lignes de code, est-ce qu'on ne pourrait pas simplement avoir la ligne où tu la définis et la ligne où tu l'appelles ?

**informer** · 04/12/2013, 22h32

Bonjour ,

Je comprends mieux vos questions car il s'avère que mon post a été dupliqué en raison de timeout successives et c'est bien sûr le post définitif qui a été supprimé.

Je vous remercie de relire mon 1er post qui est maintenant modifié pour être plus explicite.

Par contre, comme je ne développe que depuis quelques jours sans connaissances en HTML, JavaScript et PHP, il se peut que les appels aux librairies et fichiers externes soient plus que douteux alors si vous avez des conseils je suis preneur

Enfin, suite à ta remarque Bovino, j'ai supprimé

Code :

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

<?php include "SendEmail.js";?>

Et l'ai remplacé par

Code :

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

<script type="text/javascript" src="SendEmail.js"></script>

et ça marche bien sûr

:

**fredoche** · 05/12/2013, 14h56

tu as une erreur de syntaxe dans la fonction

jolie musique

lassant à force

je te laisse chercher, il n'y pas de raison que tu listes javascript comme langage sur ton CV et que tu ne saches la corriger par toi-même

**informer** · 05/12/2013, 15h12

Bonjour fredoche,

Tu as raison sur le fond mais aide moi un peu tout de même en me filant une piste

C'est sur l'appel de la fonction ValidatefrmContact () ou sur autre chose???

Quand un truc t'échappe tu peux avoir le nez collé dessus, tu vois rien, effet dit brouillard ou grosse bouse au choix

**Bovino** · 05/12/2013, 15h17

et ça marche bien sûr

Tu n'as pas réglé le problème ?

**informer** · 05/12/2013, 15h25

Le

ca marche bien sûr

c'est pour la suppression de l'include

Par contre, le problème initial sur l'appel de ValidateformContact, qui est selon Fredoche un problème de codage, je ne l'ai toujours pas identifié mais une fois fait puis testé, je passe mon post en résolu

**fredoche** · 05/12/2013, 15h33

Hum... je n'ai pas tout compris

Malgré tout l'erreur de syntaxe est toujours présente, elle s'affiche dès le chargement de la page, c'est ce qui rend ta fonction de validation invalide.

ligne 1118 quand tu affiches le source de ta page

**informer** · 05/12/2013, 16h12

Fredoche,

Pour la ligne 1118, l'erreur identifié touche regexp mais selon le w3schools ( voir ici l'affectation du regexp se fait comme suit:

var patt=/pattern/modifiers;

sans simple ou double guillemets d'où l'expression suivante:

Code :

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

var regexp = /^([0-9a-z]([-.\w]*[0-9a-z])*@(([0-9a-z])+([-\w]*[0-9a-z])*\.)+[a-z]{2,6})$/i;

Et là se pose la question de comment ne rien affecter à la variable regexp sinon faire regexp = ;

Sinon si tu cliques sur envoyer dans le 4ème onglet, apparait une 2ème erreur sur ValidateformContact qui n'est pas définie. Et c'est cette erreur qui me fait m'interroger sur la portée des fonction avec JQuery

**Kaamo** · 05/12/2013, 16h20

Juste en passant, préfère MDN à w3school

**Bovino** · 05/12/2013, 16h21

Tu peux déclarer une variable sans lui affecter de valeur :

Code :

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

var regexp;

Si tu veux lui affecter une expression régulière vide, c'est :

Code :

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

var regexp = /(?:)/;

**fredoche** · 05/12/2013, 16h23

informer

si tu pouvais éviter de m'envoyer des messages privés pour tes problèmes techniques, ce serait sympa.

A mon sens, ce type de message privé ne correspond pas à cet usage. Et l'intérêt d'un forum est de partager ses problèmes pour que les utilisateurs du forum puissent éventuellement en profiter.

tu peux simplement écrire :

Code :

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

var regexp;

Cela définit ta variable sans lui affecter de valeur, elle sera undefined

**informer** · 05/12/2013, 21h02

Merci à tous pour vos lumières sur regexp mais mon problème initial est le message suivant sur Firebug :

ReferenceError: ValidatefrmContact is not defined
if (ValidatefrmContact(document.forms.frmContact) == false)

et il n'est toujours pas résolu!

Ce message qui apparait dans Firebug est-il dû au fait que la fonction ValidatefrmContact est déclarée au niveau du Header de la page HTML mais qu'elle est appelée depuis un formulaire lui-même dans un objet onglet JQuery ????

Et merci pour me donner enfin la réponse à mon problème

ReferenceError: ValidatefrmContact is not defined
if (ValidatefrmContact(document.forms.frmContact) == false)

P.S: Tu as raison Fredoche, pas d'email en douce!!!!

**fredoche** · 06/12/2013, 10h04

Ton site n'est plus en ligne cela va être difficile de t'aider

la réponse à ton problème, c'est que, tout du moins je pense que, ValidatefrmContact est undefined parce que

Code :

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

var regexp = ;

génère une erreur de syntaxe. C'est une instruction au sein de la fonction. Avec cette erreur la fonction ne peut être définie

Corrige l'erreur avec l'une des pistes données ci dessus, cela devrait arranger les choses

**informer** · 06/12/2013, 13h48

Salut Fredoche,

Tu avais raison, c'est bien regexp qui mettait le binz. Merci encore pour tes conseils avisés car une fois la correction faite, ça marche super

Sauf que maintenant...quand le test passe sur la saisie du nom, j'ai le problème suivant:

la valeur du champ 'name' est 'undefined' quand on ne saisit rien
TypeError: theForm.name.value is undefined
if (theForm.name.value.length < 1)

alors que les autres champs n'ont pas cette erreur.

La fonction de test est :

Code js :

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
 regexp = /^[A-Za-zÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ0-9--]*$/;
   if (!regexp.test(theForm.name.value))
   {
      alert("Please enter only letter, digit and \"-\" characters in the \"name\" field.");
      theForm.name.focus();
      return false;
   }
   if (theForm.name.value == "")
   {
      alert("Please enter a value for the \"name\" field.");
      theForm.name.focus();
      return false;
   }
   if (theForm.name.value.length < 1)
   {
      alert("Please enter at least 1 characters in the \"name\" field.");
      theForm.name.focus();
      return false;
   }
   if (theForm.name.value.length > 10)
   {
      alert("Please enter at most 10 characters in the \"name\" field.");
      theForm.name.focus();
      return false;
   }

Et ça provoque pour le test

:

Code js :

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

if (theForm.name.value == "")  // => retourne False puisque undefined  => pas d'alerte

et bien sûr

Code js :

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

if (theForm.name.value.length < 1) // est en erreur générant le message firebug

Merci par avance

**Bovino** · 06/12/2013, 13h58

Là, il s'agit juste d'un choix de nommage inapproprié...
Tu as donné à un de tes champs le nom d'une des propriétés de l'objet HTMLForm, donc tu crées une ambiguïté.

Code html :

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

1
2
3
4
<form name="foo" id="myForm">
    <input name="name" />
    <input name="bar" />
</form>

Code :

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

1
2
3
var $form = document.getElementById('myForm');
console.log($form.name);  // "foo"
console.log($form.bar);  // HTMLInputElement

**informer** · 06/12/2013, 17h26

Bovino,

Ça fonctionne aux petits oignons

L'humble développeur que je suis te remercie sincèrement, Bovino.

Le problème résolu
Il provenait de la propriété name des contrôles firstname et name qui avaient tous les deux la propriété name = name. D'ou comme évoqué par Fredoche, une incohérence.

Encore une fois merci à toute la communauté et tout particulièrement aux différents intervenants sur ce post.

**NoSmoking** · 06/12/2013, 22h19

Bonjour,

Solution:
Comme HTML est sensible à la casse, il suffit de renommer name en Name.

Marrant j'aurais plus volontiers opté simplement pour nom.

**informer** · 06/12/2013, 23h59

Bonjour NoSmoking,

Enfin de compte, j'ai changé le post sur lequel tu as réagi car ne pas utiliser des mots réservés n'était pas la bonne solution.

Le problème résolu
Il était dû au fait que firstname et name avaient la même propriété name = "name" d'où incohérence et message undefined!

avec la fonction

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
function ValidatefrmContact(theForm)
{
   var regexp;
   if (theForm.subject.selectedIndex < 0)
   {
      alert("Saisie incorrecte ou manquante");
      theForm.subject.focus();
      return false;
   }
   if (theForm.firstname.value == "")
   {
      alert("Saisie obligatoire du prénom");
      theForm.firstname.focus();
      return false;
   }
   regexp = /^[A-Za-zÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ0-9--]*$/;
   if (!regexp.test(theForm.name.value))
   {
      alert("Please enter only letter, digit and \"-\" characters in the \"name\" field.");
      theForm.name.focus();
      return false;
....

Ça fonctionne comme une horloge suisse

Merci encore à tous pour votre aide

Appels JS - Portée des fonctions

JavaScript

Discussions similaires

Partager

Partager