Étiquette : formulaire

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

13/03/2023 / admin

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é

(officiel) Custom form validation rules
Magento 2 : Ajouter Une Validation Du Numéro De Téléphone – billet très complet sur le blog de Hervé Hennes. Magento 2 _ Ajouter une validation du numéro de téléphone _ Hervé Hennes et sources du module sur github.

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

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

let config = {
    [...]
    config: {
        mixins: {
            // Add mixin for global form validation
            'mage/validation': {
                'Vendor_Module/js/validation-mixin': true
            },
            // Add mixin for checkout form validation
            'Magento_Ui/js/lib/validation/validator': {
                'Vendor_Module/js/validator-mixin': true
            }
        }
    }
};

let config = {

[...]

config: {

mixins: {

// Add mixin for global form validation

'mage/validation': {

'Vendor_Module/js/validation-mixin': true

// Add mixin for checkout form validation

'Magento_Ui/js/lib/validation/validator': {

'Vendor_Module/js/validator-mixin': true

}

};

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

console.log(window.checkoutConfig);

1	console.log(window.checkoutConfig);

define([
    'jquery',
    'Magento_Checkout/js/model/postcode-validator'
], function(
    $,
    postcodeValidator
){
    'use strict';

    var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.");

    return function(validator) {

        validator.addRule(
            'validate-postcode-pattern',
            function (value) {
                var countryId = window.checkoutConfig.defaultCountryId;
                var patterns = window.checkoutConfig.postCodes[countryId];

                function processList(data) {
                    var examples = '';
                    var i = 0;

                    $.each(data, function(index, value) {
                        var length = Object.keys(data).length;

                        if (i === (length -1)) {
                            examples += value.example;
                        } else {
                            examples += value.example + '; ';
                        }

                        i++;
                    });

                    return examples;
                }

                message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns));

                return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId);
            }, function () {
                return message;
            }
        );

        return validator;
    }
});

define([

'jquery',

'Magento_Checkout/js/model/postcode-validator'

], function(

postcodeValidator

){

'use strict';

var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.");

return function(validator) {

validator.addRule(

'validate-postcode-pattern',

function (value) {

var countryId = window.checkoutConfig.defaultCountryId;

var patterns = window.checkoutConfig.postCodes[countryId];

function processList(data) {

var examples = '';

var i = 0;

$.each(data, function(index, value) {

var length = Object.keys(data).length;

if (i === (length -1)) {

examples += value.example;

} else {

examples += value.example + '; ';

}

i++;

});

return examples;

}

message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns));

return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId);

}, function () {

return message;

}

);

return validator;

}

});

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-xls-macro" xsi:type="boolean">true</item>
                                                                        <item name="validate-postcode-pattern" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

</item>

</argument>

</arguments>

</referenceBlock>

</body>

</page>

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

29/01/2021 / admin

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

<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?>
<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

1 2	<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?> <?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

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

07/12/2020 / admin

Testé fonctionnele Magento 2.4. Sources:

jQuery.validator.addMethod() dans la documentation officielle de jQuery Validate
Magento 2: How to set custom validation message?
Peut également être utile: changer le libellé des messages d’erreurs du champ mot de passe (password field)

require([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function($){
    $("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

    $.validator.addMethod(
        'product-custom-option-required', function (value) {
            if(value) return true;
            else return false;
        }, $.mage.__('Please select a variant!'));
});

require([

'jquery',

'jquery/ui',

'jquery/validate',

'mage/translate'

], function($){

$("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

$.validator.addMethod(

'product-custom-option-required', function (value) {

if(value) return true;

else return false;

}, $.mage.__('Please select a variant!'));

});

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

27/11/2020 / admin

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:

<?php if ($prefix) : ?>
    <div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">
        <?php if ($block->getPrefixOptions() === false) : ?>
            <label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>
        <?php endif; ?>

        <?php if ($block->getPrefixOptions() === false) : ?>
            <div class="control">
                <input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"
                       name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                       value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"
                       title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"
                       class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>
            </div>
        <?php else : ?>
            <?php foreach ($block->getPrefixOptions() as $_option) : ?>
                <?php if (!$block->escapeHtml(__($_option) == " ")) : ?>
                    <div class="field choice">
                        <div class="control">
                            <input
                                type="radio"
                                name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                                id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"
                                value="<?= $block->escapeHtml(__($_option)) ?>" 
                                <?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
                                <?php if ($option == $block->getObject()->getPrefix()) : ?>
                                    checked="checked" 
                                <?php endif; ?>
                                class="radio"/>
                            <label
                                class="label"
                                for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">
                                <span><?= $block->escapeHtml(__($_option)) ?></span>
                            </label>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php if ($prefix) : ?>

<div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">

<?php if ($block->getPrefixOptions() === false) : ?>

<label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>

<?php endif; ?>

<?php if ($block->getPrefixOptions() === false) : ?>

<input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"

title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"

class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>

</div>

<?php else : ?>

<?php foreach ($block->getPrefixOptions() as $_option) : ?>

<?php if (!$block->escapeHtml(__($_option) == " ")) : ?>

<input

type="radio"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"

value="<?= $block->escapeHtml(__($_option)) ?>"

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

class="radio"/>

<label

class="label"

for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">

<span><?= $block->escapeHtml(__($_option)) ?></span>

</label>

</div>

<?php endif; ?>

<?php endforeach; ?>

<?php endif; ?>

</div>

<?php endif; ?>

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é!

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
<?php if ($option == $block->getObject()->getPrefix()) : ?>
    checked="checked" 
<?php endif; ?>

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

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

23/06/2020 / admin

Testé fonctionnel Magento 2.3, 2.4

Magento 2 Dev Docs – Custom form validation
Autre propos (pas top en terme d’UI, mais peut servir dans un autre cas d’override): DOB Validation with three fields in magento2
Magento 2 Get Current Store Date Time

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

<?php
/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();
$fieldCssClass .= $block->isRequired() ? ' required' : '';
?>
<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">
    <label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>
    <div class="control customer-dob">
        <input type="text"
               name="dob"
               id="dob"
               placeholder="jj/mm/aaaa"
               data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />
        <?php if ($_message = $block->getAdditionalDescription()) : ?>
            <div class="note"><?= $block->escapeHtml($_message) ?></div>
        <?php endif; ?>
    </div>
</div>

<script>
    require([
        'cleave'
    ], function (Cleave) {
        var cleave = new Cleave('#dob', {
            date: true,
            delimiter: '/',
            datePattern: ['d', 'm', 'Y']
        });
    });
</script>

<?php

/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();

$fieldCssClass .= $block->isRequired() ? ' required' : '';

<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">

<label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>

<input type="text"

name="dob"

id="dob"

placeholder="jj/mm/aaaa"

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />

<?php if ($_message = $block->getAdditionalDescription()) : ?>

<div class="note"><?= $block->escapeHtml($_message) ?></div>

<?php endif; ?>

</div>

require([

'cleave'

], function (Cleave) {

var cleave = new Cleave('#dob', {

date: true,

delimiter: '/',

datePattern: ['d', 'm', 'Y']

});

</script>

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

var config = {
    map: {
        "*": {
            cleave: 'js/vendor/cleave/dist/cleave.min'
        }
    },
    [...]
};

var config = {

map: {

"*": {

cleave: 'js/vendor/cleave/dist/cleave.min'

}

[...]

};

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

20/05/2020 / admin

https://www.filamentgroup.com/lab/select-css.html
- pure css, mais pas un vrai select: https://codepen.io/himalayasingh/pen/pxKKgd
- pareil : https://codepen.io/miniven/pen/ZJydge

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

Rotate an image online, clockwise or counterclockwise
Convert WebP to Base64 online – Champ « Output Format »: CSS Background Image — background-image:url(). Il peut arriver que les double quotes " (dans url("data:image/webp;base64,...");) posent problème dans certains CMS. Il suffit de les retirer. Ne pas oublier également d’ajouter un caractère ; à la fin de la ligne générée.

Code CSS à mettre en place:

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    //border: none;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    //font-size: 1.4rem;
    background-color: transparent;
    background-image: url(data:image/webp;base64,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);
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

select {

-moz-appearance: none;

-webkit-appearance: none;

appearance: none;

//border: none;

line-height: 1.3;

padding: .6em 1.4em .5em .8em;

//font-size: 1.4rem;

background-color: transparent;

background-image: url(data:image/webp;base64,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);

background-position: right 10px top 50%;

background-repeat: no-repeat;

background-size: contain;

}

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

15/04/2019 / admin

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

  $.fn.clearHiddenControls = function(){
    // https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery/16105303
    $('.form-group.hidden', $_USER_ASSISTANCE_FORM).each(function(){
      const $_THIS = $(this);
      $_THIS.find('input[type="radio"], input[type="checkbox"]').prop('checked', false);
      $_THIS.find('option').prop('selected', false);
      $_THIS.find('input[type="file"], textarea').val('');
    });    
  }

$.fn.clearHiddenControls = function(){

// https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery/16105303

$('.form-group.hidden', $_USER_ASSISTANCE_FORM).each(function(){

const $_THIS = $(this);

$_THIS.find('input[type="radio"], input[type="checkbox"]').prop('checked', false);

$_THIS.find('option').prop('selected', false);

$_THIS.find('input[type="file"], textarea').val('');

});

}

$(document).clearHiddenControls();

1	$(document).clearHiddenControls();

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

15/04/2019 / admin

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

23/06/2017 / admin

Source : jquery detect which button submitted form

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

<form id="my-form" method="post">
    <input type="submit" value="Save" />
    <input type="submit" value="Delete" />
    <span id="result">Nothing clicked yet</span>
</form>

<span id="result">Nothing clicked yet</span>

</form>

$("#my-form input[type=submit]").click(function () {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});
$("#my-form").submit(function () {
    var clickedSubmitValue = $("input[type=submit][clicked=true]").val();
    $("#result").text("You clicked: " + clickedSubmitValue);
    return false;
});

$("#my-form input[type=submit]").click(function () {

$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");

$(this).attr("clicked", "true");

});

$("#my-form").submit(function () {

var clickedSubmitValue = $("input[type=submit][clicked=true]").val();

$("#result").text("You clicked: " + clickedSubmitValue);

return false;

});

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

23/06/2017 / admin

Source: Form Submission without page refresh

$(document).ready(function () {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') || window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#form_output").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

$(document).ready(function () {

$('#myform').on('submit', function(e) {

e.preventDefault();

$.ajax({

url : $(this).attr('action') || window.location.pathname,

type: "GET",

data: $(this).serialize(),

success: function (data) {

$("#form_output").html(data);

error: function (jXHR, textStatus, errorThrown) {

alert(errorThrown);

}

});

Articles récents

Catégories

Archives

Méta

Étiquette : formulaire

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

Ressources en ligne:

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

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template 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)

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

PHTML à modifier

A savoir:

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

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

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

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

Import des sources de Cleave.js dans le projet:

[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

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

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

conditionize2.js

dependsOn

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

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

Ressources en ligne:

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

PHTML à modifier

A savoir:

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

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

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

Import des sources de Cleave.js dans le projet:

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

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

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

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