Discussion :

[VVE]

Je recopie un post que j'ai soumis sur le forum JavaScript :


Salut,

Je ne sais pas si je poste ce sujet dans le bon forum, mais bon, c'est un pb à cheval entre HTML, Javascript et ASPX...

J'explique :
Je développe une appli intranet en ASPX.

Sur plusieurs pages, j'ai des formulaires HTML qui permettent à l'utilisateur de modifier des champs dans ma BDD.

J'ai donc des zones de saisies pour lesquelles je veux brider la taille maxi autorisée (ie max 256 caractères).

Pour une zone de saisie mono ligne, .NET génère une balise HTML de ce type

Code :

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

<input name="txtObservations" type="text" maxlength="256">

Je veux des zones de saisies multi lignes. Dans ce cas .NET génère une balise HTML du type

Code :

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

<textarea name="txtObservations">

Malheureusement, pour les textarea, il n'y a pas de propriété maxlength.

J'ai donc imaginé de tronquer le texte saisi dans script côté client.

J'ai ajouté le JavaScript suivant :

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
 
// cette fonction permet de tronquer la longueur d'un champ de saisie multi-ligne
function TronqueLongueur(source, MaxLength)
{
	if (source.value.length > MaxLength)
	{
		// retrouve le nom du champ
		var pos_underscore = source.id.lastIndexOf("_");
		var nom_champ = source.id.substring(pos_underscore+1);
 
		// message d'avertissement
		if (confirm("Le texte du champ '" + nom_champ + "' est trop long (" + source.value.length + " car.).\n\nIl va etre tronque a une longueur de " + MaxLength + " caracteres."))
		{
			// tronque la valeur saisie
			source.value = source.value.substring(0, MaxLength);
		}
	}
}

Puis, j'ai ajouté la propriété onchange sur ma zone de saisie pour appeler mon script. En gros ça donne ça :

Code :

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

1
2
 
<textarea name="txtObservations" onchange="JavaScript:TronqueLongueur(this,256);">

Quand l'utilisateur saisit du texte trop grand dans la zone multi lignes, un message de confirmation s'affiche pour lui signifier que le texte va être tronqué à 256 caractères.

Ce message s'affiche au moment où le curseur quitte le champ de saisie. Par exemple, si l'utilisateur clique dans un autre champ.

Mon pb se situe au niveau d'un bouton SUBMIT.
En effet, lorsque l'utilisateur clique sur le bouton (typiquement pour VALIDER la saisie), le JavaScript se déclenche bien pour tronquer mon texte, mais si le popup CONFIRM s'est affiché, le reste de l'action (le submit) ne s'exécute pas => pas de validation de ma saisie côté serveur => pas d'insertion dans ma BDD...

Comment puis-je résoudre mon pb ?

Est-ce lié au popup ? Y-a-t'il une insctruction JavaScript à ajouter dans ma fonction TronqueLongueur ? Faut-il que j'appelle sur un autre évènement que onchange ?

Merci de votre aide

Vincent

[lutecefalco]

T'as qu'à tronquer coté serveur non?
Puis comme ça, t'auras pas de pb si le JS est desactivé coté client

[VVE]

Merci pour ton tuyau.

J'ai bien essayé ça, mais l'utilisateur veut être informé si le texte qui a été saisi est tronqué => message CONFIRM dans mon JavaScript...

Si je fait ce traitement de contrôle côté serveur, ça me fait réécrire beaucoup de code car il faut, en cas de troncature, renvoyer une page côté client avec un label du genre "Erreur de saisie, le texte OBSERVATIONS a été tronqué"...

[lutecefalco]

Si je fait ce traitement de contrôle côté serveur, ça me fait réécrire beaucoup de code car il faut, en cas de troncature, renvoyer une page côté client avec un label du genre "Erreur de saisie, le texte OBSERVATIONS a été tronqué"...

Bcp, faut pas exagérer
Sinon, pourquoi ne pas appeler ta fonction JS à chaque caractère saisi et dès que ça depasse 256, tu fais un alert('...') et tu effaces le dernier caractère saisi

Mais t'auras tjs le pb du JS désactivé

[VVE]

ouaip, mais ch'u un peu fainéant sur le coup

En fait, la raison profonde est que je ne maîtrise pas trop les dév type web et que cette appli est déjà une belle usine à gaz.

Je suis un peu frileux avec les aller/retour client et serveur.

L'appli est déjà "en production", et je cherche des solutions qui n'ont pas trop d'impact sur le code existant...

Je préfère travailler côté client sur les JavaScript, même si en effet, on peut les désactiver sur les postes des utilisateurs => c'est une appli interne => je peux "imposer" certains pré-requis comme par exemple "autoriser les cookies" ou encore "activer les Javascripts"...

A ce stade du projet, je cherche l'efficacité, pas forcément l'élégance...

[VVE]

Bon ben j'ai trouvé une solution de contournement :

J'ai ajouté la fonction JavaScript suivante :

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
 
// cette fonction permet de tronquer tous les champs TEXTAREA
function TronquerTous()
{
	var formulaire = document.forms[0];
 
	for (var i = 0; i < formulaire.elements.length; i++)
	{
		var controle = formulaire.elements[i];
		if (controle.type == "textarea")
		{
			TronqueLongueur(controle, controle.tag);
		}
	}
}

et sur le bouton submit j'ai appelé cette fonction pour tronquer tous les champs TEXTAREA du formulaire AVANT de valider. Ca donne à peu près ça :

Code :

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

<button type="submit" onmouseover="JavaScript:TronquerTous();">Valider</button>

Ainsi, avant le clic sur le bouton SUBMIT, tous les champs TEXTAREA sont tronqués. Par contre, je me base désormais sur la propriété TAG pour stocker la longueur maxi du texte.




Vincent