[Résolu] Specifier les propriétés javascript dans un fichier externe

Bonjour,

Je souhaiterais bien séparer le javascript de mon code.
Je me suis aperçu que c'était possible grace au getElementByID.

Cependant,

function init(){

	valid = getEl("valid");
	nom = getEl("nom");
	prenom = getEl("prenom");
	
	nom.onkeyup = verifNom(); nom.onblur = toMaj(nom), setBlur(nom); nom.onFocus = setFocus(nom);
	prenom.onkeyup = verifPrenom(); prenom.onblur = setBlur(prenom); prenom.onFocus = setFocus(prenom);
	
	valid.onsubmit = validerForm();
}

1) Lorsque je lance cette fonction, j'ai l'impression que la fonction verifNom & co est directement executée, sans attendre l'évenement onkeyup..

2) Suis je obligé de lancer cette fonciton après la définition de mon formulaire pour que le script comprenne de quels id il s'agit ? Il semblerait que oui.

J'ai tout un tas de question, mais chaque chose en son temps

Note :

function getEl(n){return document.getElementById(n);}

N'hésitez pas à me dire ce que vous pensez de cette méthode (js externe).. ou à me donner des conseils
Modifié par Dark elf (23 Apr 2007 - 16:05)

Salut,

Effectivement, l'action se lance avant l'événement et lorsque tu sépares le js du xhtml, le js s'éxécute une fois la page xhtml chargée.

Je pense que ce sujet devrait répondre à tes attentes :

http://forum.alsacreations.com/topic-5-24689-1-Probleme-avec-onload.html

chmel y donne les syntaxes correctes.

Par ailleurs, n'hésite pas à consulter ce tutoriel ou encore celui-ci ; ça devrait t'intéresser et te renseigner sur cette démarche d'externalisation.
Modifié par koala64 (23 Apr 2007 - 14:04)

Oui, le window.onload a déjà réglé certains problèmes

Maintenant, j'ai du mal avec la validation du formulaire :

window.onload = init;

function getEl(n){return document.getElementById(n);}

function init(){
	valid = getEl("valid");
	valid.onsubmit = validerForm;
}

function validerForm() {
	nom.onkeyup();
	prenom.onkeyup();
	adresse.onkeyup();
	code.onkeyup();
	telDom.onkeyup();
	return false;
}

Lorsque le formulaire est validé, il devrait executer les fonctions onkeyup() et ne pas recharger la pages si je retourne false, non ?

(je sais qu'il faut aussi que je renvoie vrai lorsqu'il n'y a pas de soucil, masi là je suis en phase de test )

Autre chose :

	nom.onkeyup = verifNom;

Avec ce code, j'ai l'impression qu'il ne me l'execute pas tout de suite mais juste lors du onkeyup, tandis que avec :

	nom.onkeyup = verifNom();

Là, il me l'execute direct..

Qui peut m'oter ce flou ?
Parce que si j'ai raison, comment passer des paramètre sans l'executer direct au chargement de la page
Modifié par Dark elf (23 Apr 2007 - 14:17)

Ben déjà, ce serait mieux d'éviter d'appeler tes fonctions du même nom qu'un gestionnaire d'événement, ça éviterait les confusions

Ce serait plutôt quelquechose du genre :

window.onload = init;


function oId(sId)
{
   return document.getElementById(sId);
}


function init()
{
   var oNom = oId('nom');
   var oPrenom = oId('prenom');
   ...
   var oSubmit = oId('submit');

   oNom.onkeyup = verif;
   oPrenom.onkeyup = verif;
   ...
   oSubmit.onsubmit = verifGlobale;
}


function verif()
{
   var oEl = this;
   ...
}


function verifGlobale()
{
   ...
   return false;
}

Heu, j'ai du mal à voir à quoi tu fais référence
Je vois pas bien la différence entre ton code et le mien..

Je n'ai pas de fonction nommée onkeyup ou onsubmit

Mon JS complet :

window.onload = init;

function getEl(n){return document.getElementById(n);}

function init(){

	// Definition des éléments

	valid = getEl("valid");
	
	nom = getEl("nom");
	statusNom = getEl("statusNom");
	
	prenom = getEl("prenom");
	statusPrenom = getEl("statusPrenom");
	
	adresse = getEl("adresse");
	statusAdresse = getEl("statusAdresse");
	
	code = getEl("code");
	statusCode = getEl("statusCode");
	
	telDom = getEl("telDom");
	statusTelDom = getEl("statusTelDom");
	
	// Comportement des élements
	
	nom.onkeyup = verifNom;
	prenom.onkeyup = verifPrenom;
	prenom.onblur = verifPrenom;
	adresse.onkeyup = verifSimple(adresse, statusAdresse, "Le champs adresse ne doit pas être vide");
	code.onkeyup = verifSimple(code, statusCode, "Le champs code ne doit pas être vide");
	telDom.onkeyup = verifSimple(telDom, statusTelDom, "Le champs tel domicile ne doit pas être vide");
	valid.onsubmit = validerForm;
}

function validerForm() {
	nom.onkeyup();
	prenom.onkeyup();
	adresse.onkeyup();
	code.onkeyup();
	telDom.onkeyup();
	return false;
}
		
function isNotEmpty(elem) {
	if(elem.value==''){
		return false;
	}
	else {
		return true;
	}
}

function toMaj(elem){
	elem.value = elem.value.touppercase();
}

function verifMail(elem) {
	var str = elem.value;
	var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
	if (!str.match(re)) {
		elem.style.backgroundColor="red";
		return false;
	} 
	else {
		return true;
	}
}

function verifSimple(elem, elemstatus, message){
	if(isNotEmpty(elem)) {
		elem.style.backgroundColor="#AAFF00";
		setMessage(elemstatus, "");
		return true;		
	}
	else {
		elem.style.backgroundColor="red";
		setMessage(elemstatus,message);
		return false;
	}
}

function verifNom(){
	if(isNotEmpty(nom)) {
		nom.style.backgroundColor="#AAFF00";
		setMessage(statusNom,"");
		return true;		
	}
	else {
		nom.style.backgroundColor="red";
		setMessage(statusNom,"Le champs prénom ne doit pas être vide.");
		return false;
	}
}
function verifPrenom(){
	if(isNotEmpty(prenom)) {
		prenom.style.backgroundColor="#AAFF00";
		statusPrenom.innerHTML="";
		return true;
	}
	else {
		prenom.style.backgroundColor="red";
		setMessage(statusPrenom,"Le champs prénom ne doit pas être vide.");
		return false;
	}
}

function setMessage(elem, texte){
	elem.innerHTML=texte;
}

var color;
function setFocus(elem){
	color = elem.style.backgroundColor;
	elem.style.backgroundColor="beige";
}

function setBlur(elem){ // on remet les classes initiales lorsque le focus disparait
	elem.style.backgroundColor=color;
}

Au passage, les fonctions setFocus, setBlur fonctionnent mal (entre autre)
Modifié par Dark elf (23 Apr 2007 - 14:39)

Ah ! J'avais cru quand j'ai croisé ceci (ce qui me paraissait bizarre ) :

function validerForm() {
	nom.onkeyup();
	prenom.onkeyup();
	adresse.onkeyup();
	code.onkeyup();
	telDom.onkeyup();
	return false;
}

Sinon, ces trois lignes ne vont pas :

adresse.onkeyup = verifSimple(adresse, statusAdresse, "Le champs adresse ne doit pas être vide");
code.onkeyup = verifSimple(code, statusCode, "Le champs code ne doit pas être vide");
telDom.onkeyup = verifSimple(telDom, statusTelDom, "Le champs tel domicile ne doit pas être vide");

Comme tu passes des paramètres, tu dois englober verifSimple dans function() { ... } pour que ça ne s'éxécute pas directement.

koala64 a écrit :
Ah ! J'avais cru quand j'ai croisé ceci (ce qui me paraissait bizarre ) :

function validerForm() {
	nom.onkeyup();
	prenom.onkeyup();
	adresse.onkeyup();
	code.onkeyup();
	telDom.onkeyup();
	return false;
}

Sinon, ces trois lignes ne vont pas :

adresse.onkeyup = verifSimple(adresse, statusAdresse, "Le champs adresse ne doit pas être vide");
code.onkeyup = verifSimple(code, statusCode, "Le champs code ne doit pas être vide");
telDom.onkeyup = verifSimple(telDom, statusTelDom, "Le champs tel domicile ne doit pas être vide");

Comme tu passes des paramètres, tu dois englober verifSimple dans function() { ... } pour que ça ne s'éxécute pas directement.

Haaa, merci, c'est donc comme ça qu'on fait "ne pas" s'executer ce damné codé
Enfin !

Bon, il me reste ce soucil là :
http://forum.alsacreations.com/topic-5-24833-1-Verifier-le-contenu-dun-champs-a-chaque-modif.html


Quand au premier morceau de code, j'appelle bien les évenement onkeyup des champs, mais j'ai vu ailleurs qu'on pouvait, non ?
Modifié par Dark elf (23 Apr 2007 - 17:19)

Salut,

Dark elf a écrit :
Quand au premier morceau de code, j'appelle bien les évenement onkeyup des champs, mais j'ai vu ailleurs qu'on pouvait, non ?

Si mais tu les appellais au onsubmit donc autant lancer directement la vérification des champs plutôt que d'appeler des événements qui n'ont pas vraiment de sens lors de la soumission du formulaire.

Oui, c'est vrai..
En fait, ça m'évite à répéter pas mal de choses puisque la vérification utilise les même actions que les onkeyup
Modifié par Dark elf (24 Apr 2007 - 10:04)