Étiquette : formulaire

[Magento 2] Validation des champs de formulaire via les UI components, ressources en ligne et astuces

Ressources en ligne:

ATTENTION: il y a pas mal de ressources en ligne (blogs, stack overflow) qui, sans donner de solutions incorrectes, ne donnent que des solutions partielles ou partiellement dépréciées.

J’ai notamment perdu pas mal de temps avant de comprendre qu’il existait deux systèmes de validation des champs de formulaires, dont un
est spécifique au Checkout et que ça avait son importance au moment d’ajouter un nouveau test de validation par le biais d’une mixin
!

DONC… J’ai trié les ressources en deux catégories: celles à consulter en 1er et celles qui vous aideront moins, voire vous embrouilleront…

D’une manière générale avec les ressources en ligne sur Magento 2 (ou Adobe Commerce maintenant), préférez en priorité la documentation officielle de développement Front sous Magento 2/Adobe Commerce avant toute autre ressource!

Ressources à consulter en priorité

Ressources à consulter ensuite, si vous n’avez pas résolu votre problème

Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)

Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce

Comme expliqué dans l’excellent billet de Hervé Hennes sur l’ajout d’une validation sur un champ « Numéro de téléphone » dans Magento 2:

L’environnement de validation de données utilisées dans le compte clients et dans le tunnel de commandes étant différents il faudra créer 2 mixins.

app/code/Vendor/Customer/view/frontend/requirejs-config.js

app/code/Vendor/Customer/view/frontend/web/js/validator-mixin.js

app/code/Vendor/Customer/view/frontend/layout/checkout_index_index.xml

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

Testé fonctionnel Magento 2.4 CE. Source: Magento 2: Call customer login page in other phtml.

[Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)

Testé fonctionnele Magento 2.4. Sources:

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

  • Se rendre dans STORES > Attributes > Customer
  • Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
  • Scroller jusqu’au volet « Storefront Properties »
  • Passer le champ « Show on Storefront » à « Yes »
  • Cliquer sur le bouton orange « Save Attribute »
  • Se rendre ensuite dans STORES > Settings > Configuration
  • Passer le Scope au store voulu
  • Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
  • Ouvrir le volet « Name and Address Options »
  • Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
  • Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
  • Cliquer sur le bouton orange « Save Config »
  • Se rendre ensuite dans SYSTEM > Tools > Cache Management
  • Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
  • Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

Testé fonctionnel Magento 2.3, 2.4

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

Apporter plus d’attention au passages suivants:

  • data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
  • <script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Code CSS à mettre en place:

[jQuery] Vider des champs de formulaire de manière dynamique

Dans cet exemple, on vide tous les champs de formulaire enfant de l’élément qui a la classe .form-group.hidden

[jQuery] Des plugins pour gérer des actions conditionnelles (notamment afficher/masquer des champs de formulaire)

conditionize2.js

A flexible jQuery plugin for conditional actions (like showing and hiding elements, triggering events or whatever else you need) based on values of one or many fields. This is an improved version of conditionize.js jQuery plugin. Unlike the previous version, conditionize2.js is not restricted to only show and hide actions. But for simpler migration from conditionize.js to conditionize2.js, show/hide is the default behaviour.

A lot of EXAMPLES available here.

dependsOn

A jQuery plugin to facilitate the handling of form field dependencies. Demo.

[jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire

Source : jquery detect which button submitted form

Attention: ne fonctionne qu’avec l’élément <input />, pas avec les éléments <a />, <button />.

[jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax

Source: Form Submission without page refresh