Traîter une chaîne à la volée…

Uniformiser les données saisies par l’utilisateur d’un formulaire est généralement l’une des principales étapes de la conception d’une application.
On formate, on normalise afin d’obtenir une restitution claire et uniforme.

Prenons l’exemple d’un formulaire dans lequel il faudrait renseigner le nom, le prénom et la date de naissance.
Des « règles » sont généralement utilisées. On aura ainsi besoin du nom en majuscules (ex : TORVALDS), du prénom avec l’initiale en majuscule (ex : Linus) et de la date de naissance sous la forme jj/mm/aaaa (ex : 01/01/1970).

Plusieurs solutions de traitement existent pour ces trois champs. Suivant le langage utilisé, bien sûr, mais également suivant le moment du traitement.
En PHP, on traite généralement les chaînes avant leur envoi dans la BDD. Ce procédé est complètement transparent pour l’utilisateur. Malheureusement, la localisation de l’application peut induire de plus ou moins nombreuses lignes de code. La gestion des majuscules accentuées n’étant pas encore optimale.

On peut également opter pour un traitement à la volée. C’est-à-dire que la chaîne se modifie au fur et à mesure que l’utilisateur presse les touches du clavier. En plus d’être très dynamique, cette méthode rassure l’utilisateur et apporte un aspect légèrement plus pédagogique. JavaScript (parmi d’autres) le permet.

Dans le cas du nom patronymique, que l’on voudrait voir apparaître en majuscules, deux solutions existent.
La première, plus simple, requiert l’insertion de la fonction toUpperCase() dans l’attribut onkeyup de la balise input.

onkeyup="javascript:this.value=this.value.toUpperCase()"

Chaque caractère sera automatiquement converti en majuscule à la volée.
Cependant, sur une grosse application, il peut être plus utile de créer une fonction type que l’on appellera pour chaque traitement.
Un fichier js contenant toutes les fonctions peut faire l’affaire.
Celui-ci contiendra une fonction générale :

function formatToutMaj(objCha) {
var objChaMaj;
objChaMaj = objCha.value.toUpperCase();
objCha.value = objChaMaj;
}

Fonction que l’on appellera à l’aide d’un onkeyup dans la balise input :

onkeyup="javascript:formatToutMaj(this.form.nom)"

Dans ce cas, l’attribut name de la balise input a pour valeur « nom ». Ceci explique le this.form.nom…

L’utilisation d’une fonction dédiée n’est pas véritablement justifiée dans la plupart des cas. Elle peut, par contre, s’avérer utile dans un souci de clarté ou pour être réutilisée ailleurs.

Pour le prénom, la fonction est un petit peu plus complexe. Il faut forcer l’affichage en minuscules avant de mettre en majuscule l’initiale. Jusqu’ici rien de bien compliqué.
Mais c’est sans compter sur les prénoms composés (que certains lient par des espaces ou des traits d’union).

function formatInitMaj(objCha) {
var nb;
var objChaTmp;
var tmpStr;
var debStr;
var finStr;
var strLen;
objChaTmp = objCha.value.toLowerCase();
strLen = objChaTmp.length;
if (strLen > 0) {
for (nb = 0; nb < strLen; nb++) {
if (nb == 0)  {
tmpStr = objChaTmp.substring(0, 1).toUpperCase();
finStr = objChaTmp.substring(1, strLen);
objChaTmp = tmpStr + finStr;
} else {
tmpStr = objChaTmp.substring(nb, nb+1);
if (tmpStr == " " || tmpStr == "-" || tmpStr == "_" ||
tmpStr == "/" &amp;&amp; nb &lt; (strLen-1)) {
tmpStr = objChaTmp.substring(nb+1, nb+2).toUpperCase();
debStr = objChaTmp.substring(0, nb+1);
finStr = objChaTmp.substring(nb+2, strLen);
objChaTmp = debStr + tmpStr + finStr;
}
}
}
}
objCha.value = objChaTmp;
}

Comme pour le nom, on appellera cette fonction par le biais de l’attribut onkeyup :

onkeyup="javascript:formatInitMaj(this.form.prenom)"

Enfin, et pour terminer, on peut traiter la saisie des dates au format jj/mm/aaaa en demandant à l’utilisateur de ne taper que les chiffres (ex : 01011970).

function formatDate(objCha) {
var objChaTmp;
var debStr;
var reg;
var separ;
var strLen;
separ = "/";
debStr = objCha.value;
strLen = debStr.length;
if (strLen == 2 || strLen == 5) {
objChaTmp = debStr + separ;
} else {
objChaTmp = debStr;
}
objCha.value = objChaTmp;
}

Une fonction que l’on appellera encore et toujours de la même façon :

onkeyup="javascript:formatDate(this.form.date)"

Ici, on ajoute un « / » de séparation après le jour et après le mois. L’attribut maxlenght= »10″ de la balise input permettra de verrouiller encore plus le format de la date.

Il existe évidemment des moyens plus souples, plus rapides pour arriver aux mêmes résultats. Ces trois fonctions ne sont que des exemples. Elles sont, toutefois, faciles à décoder pour un débutant et faciles à adapter…

Attention tout de même ; le JavaScript s’exécute côté client et non côté serveur comme le PHP. Les réglages personnels peuvent entraver le bon fonctionnement de certaines fonctions.
Veillez également à ne pas alourdir vos applications avec des bouts de code plus inutiles les uns que les autres…