SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 251 visiteurs en ce moment

Accueil > Auteurs, authentification et autorisations > Auteurs étendus > Inscription2 > Utilisation et validation des crayons de Inscription2

Utilisation et validation des crayons de Inscription2

6 septembre 2009 – par BoOz, cam.lafit, cmtmt, kent1 – commentaire

10 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Cet article ne concerne que la version du plugin inscription2 compatible avec SPIP 2.0 récupérable sur SPIP-ZONE. Il fait partie d’une série d’articles documentaires du plugin inscription2.

Dans un autre article nous avons vu que le profil est accessible en modification de deux manière différentes : l’utilisation du formulaire d’inscription en lui passant un id_auteur défini ou via les crayons.

Dans le cas de l’utilisation des crayons, il est nécessaire de vérifier la validité des entrées afin d’avoir des profils d’utilisateurs avec le moins d’erreurs possibles.

Inscription2 propose des contrôleurs et vues spécifiques aux champs du plugin. Cet article permet de les expliciter et également de donner la marche à suivre afin de créer ses propres crayons...

Pour de plus amples informations sur les contrôleurs et les vues des crayons, voir la documentation officielle

Tout d’abord, l’architecture XHTML des crayons spécifiques au plugin inscription2 respecte au maximum la nomenclature des formulaires décidée par l’équipe de spip lors de la sortie de la version 2.0. Ainsi chaque crayon est constitué comme ceci :

Il est à noter que les crayons entourent le contenu du contrôleur dans un formulaire avec la class formulaire_crayon dans une div de class formulaire_spip.

Cette méthode permet, dans un site en production, que les crayons ressemblent plus ou moins aux autres formulaires du site. Étant donné que ces crayons sont destinés à tout utilisateur du site (du visiteur au webmestre) il semble qu’il soit important que les utilisateurs comprennent visuellement ce qu’ils font et donc reconnaissent facilement qu’ils ont ouvert un formulaire.

Les contrôleurs / vues spécifiques à inscription2

Les contrôleurs spécifiques aux champs du plugins sont les suivants :

  • adresse : modifie et vérifie une adresse (chaîne de 5 caractères où plus de lettres et de nombres) ;
  • adresse_pro : modifie et vérifie l’adresse (voir ci-dessus) ;
  • code_postal : modifie et vérifie le code postal en fonction d’un masque qui devrait éviter des dérives mais n’assure pas forcément un vrai code postal car il est impossible de prévoir le pays de l’utilisateur (autorise cependant les notations du genre F-XXXXX et XXXXX par exemple) ;
  • code_postal_pro : modifie et vérifie le code postal professionnel (idem au code postal normal) ;
  • ville : modifie et vérifie la ville (chaîne de 2 caractères ou plus uniquement composée de lettres) ;
  • ville_pro : modifie et vérifie la ville professionnelle (idem ci-dessus) ;
  • pays : modifie le pays, il affiche le sélecteur de pays ;
  • pays_pro : modifie le pays professionnel (idem ci-dessus) ;
  • fax : modifie et vérifie la validité d’un numéro de téléphone (comme le code postal, cela permet d’éviter les dérives mais ne peut forcer une réelle validation dépendante du pays). On autorise les notations internationnales du type +33 X XX XX XX XX ou nationales XX XX XX XX XX ;
  • fax_pro : modifie et vérifie le fax professionnel (idem ci-dessus) ;
  • mobile : modifie et vérifie le numéro de mobile (idem ci-dessus) ;
  • mobile_pro : modifie et vérifie le numéro de mobile professionnel (idem ci-dessus) ;
  • telephone : modifie et vérifie le numéro de téléphone (idem ci-dessus)
  • telephone_pro : modifie et vérifie le numéro de téléphone professionnel (idem ci-dessus) ;

Les contrôleurs ci-dessus décrivent des contrôleurs pour champs uniques, le plugin met également à disposition plusieurs contrôleurs permettant de modifier plusieurs champs d’un seul coup, utile lorsqu’on a besoin d’un profil très complet (site de vente, d’associations ...) :

  • adressecomplete et adressecompletepro : modifient et valident les adresses normales et professionnelles complètes (les 4 champs adresse, code postal, ville et pays) ;
  • telfax et telfaxpro : modifient et valident les 3 types de numéros de téléphone possibles (fax, mobile et téléphone) ;

Reportez vous aux modèles de modification de profil du plugin pour voir comment insérer ces contrôleurs dans votre site.

La vérification et validation des crayons

Le fonctionnement de ces crayons spécifiques est assez simple, à leur ouverture, ils vérifient la validité du contenu du ou des champs, l’opération est refaite à chaque fois que l’utilisateur ajoute ou supprime un caractère des champs (évènement javascript « keyup »). Si le contenu est valide, le crayon est normal, dans le cas où le contenu des champs est invalide, un message d’erreur est affiché à l’utilisateur et le bouton de validation du crayons est caché, l’utilisateur n’a plus la possibilité de valider son texte.

Avant la validation du crayon, les valeurs sont vérifiées afin de ne valider que des valeurs « raisonnables ». On utilise pour ce faire le plugin jQuery validation de Jörn Zaefferer.

Si le champs est spécifié comme obligatoire dans la configuration du plugin, cette option est prise en compte et il ne sera pas possible de valider un contrôleur vide.

Le plugin se base sur des méthodes ajoutées au plugin validation de jQuery, en plus de celles définies par défaut, afin de valider certains types de champs. Les méthodes en question sont des expressions régulières de validation des inputs et textareas, leur associant un message d’erreur en cas de non validité. Le plugin en compte quatre différentes :

  • chainenombre : qui vérifie que le contenu de l’input ou du textarea est une chaîne composée de chiffres et de lettres (utilisée dans le contrôleur d’adresse notemment) ;
  • chaine : qui vérifie que le contenu n’est composé que de lettres ;
  • postal : qui vérifie que le contenu est un code postal possible ;
  • numero : qui vérifie que le contenu est un numero de téléphone potentiel ;

Ces méthodes sont disponibles dans le fichier i2_validation_method.js.html à la racine du plugin.

Le plugin définit également quatre addClassRules pour le même plugin jQuery qui permet d’associer des méthodes de validation à des champs en se basant sur une class CSS associée à l’input ou au textarea en question. Ces class utilisables sont : « obligatoire » (pour les champs obligatoires), « adresse » (pour les champs de type adresse), « numero » pour les champs de type numéro de téléphone et « cp » pour des champs de type code postal. Ces « addClassRules » associent donc à des class CSS une ou plusieurs méthode de validation par exemple :

  • « required » (disponible par défaut dans le plugin) uniquement pour les champs avec la class obligatoire ;
  • « numero » (décrite dans le plugin inscription2) et « rangelength » (disponible par défaut dans le plugin jQuery) pour les numéros de téléphone ;

Ces associations sont également visibles dans le fichier i2_validation_method.js.html à la racine du plugin.

Ces « méthodes » et « addCassRules » sont extensibles facilement par tout développeur de sous plugin pour inscription2. Cette partie sera explicitée dans un autre article.

Créer ses propres crayons pour inscription2

La meilleure manière est de prendre exemple sur les contrôleurs existants.

Pour des besoins spécifiques il se peut que vous souhaitiez créer vous-mêmes certains crayons spécifiques (nous allons prendre l’exemple de modification du champs adresse), pour ce faire il est nécessaire de créer un fichier du type :
squelettes/controleurs/adresse.html

Il doit contenir au préalable une boucle sur la table dont fait partie le ou les champs que l’on souhaite modifier, dans un cache réglé à 0, dans notre cas :

  1. #CACHE{0}
  2. <BOUCLE_a(AUTEURS_ELARGIS){id_auteur=#ENV{id_auteurs_elargi}}{tout}>
  3. </BOUCLE_a>

Télécharger

Dans cette boucle nous ajoutons le contenu html basique de chaque crayons :

  1. <fieldset[ style="(#ENV{style})"]>
  2. <legend><:inscription2:adresse:></legend>
  3. <ul>
  4. [(#CONFIG{inscription2/adresse_fiche_mod}|=={on}oui)
  5. [(#CONFIG{inscription2/adresse_obligatoire}|=={on}|oui)#SET{adresse_obl, true}]
  6. [(#GET{adresse_obl}|?{<li class="obligatoire">,<li>})]
  7. <label><:inscription2:adresse:></label>
  8. <textarea class="crayon-active text adresse[(#GET{adresse_obl}|oui) obligatoire]" name="#ENV{name_adresse}" style="width:#ENV{largeur}px;">[(#ADRESSE**|entites_html)]</textarea>
  9. </li>]
  10. </ul>
  11. </fieldset>

Télécharger

Explicitons un peu son contenu en prenant chaque balise une à une :

  • #ENV{style} : : cette balise est calculée automatiquement par le plugin « crayons » ;
  • [(#CONFIG{inscription2/adresse_fiche_mod}|=={on}oui) : on vérifie si le champs en question est bien activé, devrait toujours retourner vrai si le squelette est correctement fait ;
  • [(#CONFIG{inscription2/adresse_obligatoire}|=={on}|oui)#SET{adresse_obl, true}] : on vérifie si le champ est obligatoire, s’il l’est on position à true la variable « adresse_obl » ;
  • [(#GET{adresse_obl}|?{<li class="obligatoire">,<li>})] : on vérifie la variable « adresse_obl », si elle vaut « true » on crée le li parent du champs à modifier avec la class « obligatoire » sinon on ne lui met pas de class spécifique ;
  • #ENV{name_adresse} : cette balise est envoyée par crayons, il est important de mettre « name_nom_de_votre_controleur » ;
  • #ENV{largeur} est également envoyée par le plugin crayons ;
  • [(#ADRESSE**|entites_html)] : correspond à la valeur de la balise de la boucle parente à afficher (l’écriture de la sorte évite tout type d’erreurs) ;

Voilà, l’écriture diffère un peu d’un crayon habituel mais elle correspond à la meilleure que l’on ait trouvée pour ce plugin.

Si vous souhaitez ajouter une validation à votre contrôleur

Dans un premier temps juste en dessous de la ligne de la boucle (avant le html), ajoutez la ligne suivante :

  1. [<script type="text/javascript" src="(#URL_PAGE{crayons_validation.js}|parametre_url{lang,#ENV{lang}})"></script>]

Cette ligne permet d’insérer les librairies javascript nécessaires à la validation javascript.

La fonction de base de validation à ajouter juste en dessous est la suivante (elle est documentée au maximum pour expliquer ce qu’elle fait, certaines parties sont à modifier en fonction du nom du contrôleur utilisé) :

  1. <script type="text/javascript">
  2. // On test si le js est bien chargé, sinon on ne fait rien
  3. if (typeof cQuery.fn.validate == "function") {
  4. // On récupère l'objet du dom créé par crayons
  5. // Ici vous devez renommer "adresse" par le nom de votre contrôleur
  6. var me = cQuery(".auteurs_elargi-adresse-#ID_AUTEUR");
  7. // On récupère un objet javascript correspondant au formulaire à valider
  8. var id = me.crayon().find('form');
  9.  
  10. // La fonction de validation en tant que telle
  11. function validation(){
  12. // On doit répéter cette opération si le controleur accepete la barre typo
  13. var me = cQuery(".auteurs_elargi-adresse_pro-#ID_AUTEUR");
  14. var id = me.crayon().find('form');
  15. var validator = cQuery(id).validate({
  16. onkeyup: function(){
  17. validation();
  18. },
  19. showErrors: function(errors, errorList){
  20. validator.defaultShowErrors();
  21. crayon_affiche_submit(me, id);
  22. },
  23. success: function(label){
  24. label.parents('li.erreur').removeClass('erreur');
  25. label.remove();
  26. crayon_affiche_submit(me, id)
  27. }
  28. });
  29. //On test le formulaire pour chercher les potentielles erreurs
  30. validator.form();
  31. // On affiche /cache le bouton de submit en cas d'erreur
  32. crayon_affiche_submit(me, id);
  33. }
  34. //On ajoute l'asterisque qui signale qu'un champ est obligatoire
  35. id.find('.obligatoire label').not('.error').append('*');
  36. //On lance la fonction validation() au bout de 500 ms
  37. setTimeout('validation()', 500);
  38. }
  39. </script>

Télécharger

Voilà avec cela nous avons l’ensemble du contrôleur « adresse ».

P.-S.

Si vous estimez que certains contrôleurs ou certaines méthodes de validation manquent, ou qu’ils devraient être modifiés pour correspondre à un usage par défaut du plugin (pas un cas particulier correspondant à vos besoins personnels), n’hésitez pas à le modifier sur la zone ou ajouter des correctifs dans le forum ci-dessous.

Dernière modification de cette page le 11 septembre 2009

Retour en haut de la page

Vos commentaires

  • Le 9 octobre 2010 à 08:52, par texaverie En réponse à : Utilisation et validation des crayons de Inscription2

    bonjour,

    dans le cadre du plugin association2 pour spip2.1.2 , on ne voit nulle part la possibilité de donner un statut interne ni à un nouveau visiteur, ni de modifier un visiteur en prospect par exemple

    est-ce un correctif à faire ou une manip que je n’ai pas trouvé ?

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Adaptive Images

    15 novembre 2013 – 66 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là