Limitation de caractères dans un champ textarea

de | 19/08/2012

A la demande d’un chercheur qui voulait créer un formulaire pour que les participants à un colloque lui transmettre des informations précis, je lui ai proposé une solution parmi d’autre. La voici.

 

La demande:

le formulaire doit avoir les champs souhaités. Un champ résumé doit avoir un maximum de 200 mots. Il doit pouvoir récupérer ces informations sur sa machine sous format numérique.

Solution:

Je lui ai propose un formulaire envoyé sur son mail.

J’ai opté pour ChronoForms et son composant ChronoContacts. Il permet soit de créer avec un assistant le formulaire soit de copier du code html d’un formulaire existant, de configurer l’envoi du formulaire par mail ou le stocker dans une base de donnée. Installation et prise en main en vidéo par http://www.stylitek.com

 

Pour l’instant j’ai rien fait d’autre que de paramétrer comme sur la vidéo, avec un peu de test sur les différents paramètres que propose Chronoforms. Là ou je bidouille un peu c’est pour le nombre de mots dans le champ textarea pour le descriptif.

En cherchant sur le net on trouve tout plein de script javascript pour faire le controle. J’ai choisi un qui permet en plus d’interdire certains mots en les cachant par des étoiles ou en les supprimant! C’est celui là. Très bien mais il faut que je le fasse marché avec Joomla et Chronoforms!

J’ai ajouté en plus une alert() dans le fichier js (limitation.js) si on atteind le nombre maximum de caractères autorisé. Après la ligne 51 j’ai ajouté:

window.alert('Oups..vous avez atteind le nombre limite de caractère autorisé !');

Maintenant voilà la manip de code.

Transférer le script js dans le répertoire includes/js de joomla par FTP.

Ajoutez dans le head de votre template :

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

Dans la page admin de Chronoforms, il faut édité le formulaire que vous avez créer (avec la vidéo). ATTENTION pas avec le « Edit Wizard ». Dans la page admin de joomla ouvrez Composants/Chrono forms/Forms managment, puis dans la liste des formulaires cliquez sur votre formulaire dans la colonne « Name ». Ouvrez l’onglet « Form code ». Ouvrez Form javascript avec le [*/-] et collez le code suivant:

 

//    Mots interdits. (ne tient pas compte de la casse : 'WaGoN' sera détecté comme 'wagon' ) var mots_interdits = new Array('chieur');
//    Si la variable suivante est à true, les mots interdits sont remplacés par des étoiles.
 //    Sinon, il sont effacés.
 var RemplacementEtoiles = false;
//    Nombre de caractères maximum du textarea
 var Nombre_Caracteres_Maximum = 1200;
//    Nombre de caractères minimimal à partir duquel il n'y a plus de doute :
 //    Le mot qui est scanné est bien un mot interdit.
 //    Valeur par défaut : 4
 //    EXEMPLE :
 //        Mettez le mot 'con' dans le tableau des mots interdits.
 //        Tapez le mot conSpiration.
 //        Mettez le curseur du textarea juste avant le S.
 //        Tapez un espace. ===> le mot 'con' est remplacé.
 //        Si vous mettez la variable suivante à 3, et que vous recommencez l'opération, vous ne pourrez pas taper le mot conspiration.
 var Constante_Doute = 7;

Si vous ne voulez pas de mots interdits, mettez un mot dont vous êtes sure qu’il n’y aura pas (ici chieur), puis dans Constante_Doute donnez comme valeur le nombre de caractère de votre mot interdit plus 1.

Maintenant vous ouvrez Form HTML puis dans votre balise de textarea coller ce code (ATTENTION de ne pas avoir 2 fois l’attribut name):

name="message" onkeyup="Compter(this, this.form.CharRestant);"

 

Vous pouvez aussi coller ça pour savoir combien il reste de caractère (pas dans votre balise textarea hein).

<br/> Nombre de caractères restant : <input type="text" name="CharRestant" size="2" disabled="disabled">

 

REMARQUE:

Pour infos, je prends en moyenne 5 caractères par mot donc pour 200 mots ça fait 1000 caractères plus 200 espaces soit 1200 caractères. Mais vous faites comme vous voulez !!

 

Voilà j’espère que c’est clair.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*