Magento 2 - Validation de formulaire

existe-t-il un aperçu des nouveaux attributs de validation de formulaire dans Magento 2?

Vous pouvez ajouter une classe pour validation dans Magento 2. Voir l'exemple ci-dessous. Il y a près de 72 règles (classe de validation) que vous pouvez utiliser:

$fieldset->addField(
    'email_from',
    'text',
    ['name' => 'email_from', 'label' => __('Email From'), 'title' => __('Email From'), 'required' => true, 'class' => 'validate-email']
);

Voir le blog pour la liste des règles disponibles pour plus d'informations:

Voici la liste des règles de classes de validations prises en charge par magento 2. Il vous suffit d'ajouter une classe css pour que la règle s'applique.

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-identifier
validate-zip-international
validate-state
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-number
validate-cc-ukss
required-entry
checked
not-negative-amount
validate-per-page-value-list
validate-new-password
validate-item-quantity
equalTo

Il existe 3 façons différentes d'utiliser la validation de formulaire dans magento 2

Pour activer la validation javascript, utilisez le code suivant dans votre modèle

<form class="form" id="custom-form" method="post" autocomplete="off">
 <fieldset class="fieldset">
     <legend class="legend"><span><?php echo __('Personal Information') ?></span></legend><br>
      <div class="field required">
          <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
          <div class="control">
              <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
          </div>
      </div>
 </fieldset>
 <div class="actions-toolbar">
      <div class="primary">
          <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
      </div>
  </div>
</form>

1

<script type="text/x-magento-init">
    {
        "#custom-form": {
            "validation": {}
        }
    }
</script>

2

<form data-mage-init='{"validation": {}}' class="form" id="custom-form" method="post" autocomplete="off">

3

<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){

   var dataForm = $('#custom-form');
   dataForm.mage('validation', {});

});
</script>

* le formulaire personnalisé est l'identifiant du formulaire, vous pouvez le remplacer par votre identifiant de formulaire

Liste des règles de validation des formulaires

Pour conclure cet article, une liste de noms de règles de validation est fournie ici comme référence rapide vers la documentation officielle:

Règles de Magento:

validate-no-html-tags

validate-select

validate-no-empty

validate-alphanum-with-spaces

validate-data

validate-street

validate-phoneStrict

validate-phoneLax

validate-fax

validate-email

validate-emailSender

validate-password

validate-admin-password

validate-customer-password

validate-url

validate-clean-url

validate-xml-identifier

validate-ssn

validate-zip-us

validate-date-au

validate-currency-dollar

validate-not-negative-number

validate-zero-or-greater

validate-greater-than-zero

validate-css-length

validate-number

required-number

validate-number-range

validate-digits

validate-digits-range

validate-range

validate-alpha

validate-code

validate-alphanum

validate-date

validate-date-range

validate-cpassword

validate-identifier

validate-zip-international

validate-one-required

validate-state

required-file

validate-ajax-error

validate-optional-datetime

validate-required-datetime

validate-one-required-by-name

less-than-equals-to

greater-than-equals-to

validate-emails

validate-cc-type-select

validate-cc-number

validate-cc-type

validate-cc-exp

validate-cc-cvn

validate-cc-ukss

validate-length

required-entry

not-negative-amount

validate-per-page-value-list

validate-per-page-value

validate-new-password

required-if-not-specified

required-if-all-sku-empty-and-file-not-loaded

required-if-specified

required-number-if-specified

datetime-validation

required-text-swatch-entry

required-visual-swatch-entry

required-dropdown-attribute-entry

Validate-item-quantity

validate-grouped-qty

validate-one-checkbox-required-by-name

validate-date-between

validate-dob

max-words

min-words

range-words

letters-with-basic-punc

alphanumeric

letters-only

no-whitespace

zip-range

integer

vinUS

dateITA

dateNL

time

time12h

phoneUS

phoneUK

mobileUK

stripped-min-length

email2

url2

credit-card-types

ipv4

ipv6

pattern

allow-container-className

Règles jQuery:

required,

remote,

email,

url,

date,

dateISO,

number,

digits,

creditcard,

equalTo,

maxlength,

minlength,

rangelength,

range,

max,

min

voir http://inchoo.net/magento-2/validate-custom-form-in-magento-2/

Dans les composants d'interface utilisateur, il peut être utilisé en suivant l'exemple de configuration (Magento v2.2.0):

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="priority" sortOrder="1000" formElement="input">
            <settings>
                <validation>
                    <rule name="not-negative-amount" xsi:type="boolean">true</rule>
                </validation>
                [...]
            </settings>
        </field>
    </fieldset>
</form>

Voir plus d'exemples dans le fichier:
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml

La liste des validateurs dans les composants d'interface utilisateur, il peut être trouvé dans
vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js.

Je viens d'écrire ce script pour récupérer toutes les clés avec des messages d'erreur pour l'explication:

• required-entry:
  Ceci est un champ obligatoire.
• validate-alphanum-with-espaces:
  Veuillez utiliser uniquement des lettres (az ou AZ), des chiffres (0-9) ou des espaces uniquement dans ce champ.
• phoneUK:
  Veuillez spécifier un numéro de téléphone valide
• validate-email:
  Veuillez entrer une adresse email valide (Ex: [email protected]).
• ipv4:
  veuillez entrer une adresse IP v4 valide.
• vérifié:
  Ce champ est obligatoire.
• valider-sélectionner:
  Veuillez sélectionner une option.
• ipv6:
  Veuillez entrer une adresse IP v6 valide.
• heure:
  veuillez saisir une heure valide, entre 00:00 et 23:59
• numéro de validation:
  veuillez saisir un numéro valide dans ce champ.
• validate-phoneLax:
  Veuillez entrer un numéro de téléphone valide. Par exemple (123) 456-7890 ou 123-456-7890.
• dateITA:
  veuillez saisir une date correcte
• validate-xml-identifier:
  Veuillez saisir un identifiant XML valide (Ex: quelque chose_1, block5, id-4).
• validate-clean-url:
  veuillez saisir une URL valide. Par exemple http://www.example.com ou www.example.com.
• validate-admin-password:
  Veuillez saisir au moins 7 caractères, à la fois numériques et alphabétiques.
• validate-no-html-tags:
  les balises HTML ne sont pas autorisées.
• validate-integer:
  Veuillez entrer un entier valide dans ce champ.
• validate-data:
  veuillez utiliser uniquement des lettres (az ou AZ), des chiffres (0-9) ou des traits de soulignement (_) dans ce champ, et le premier caractère doit être une lettre.
• validate-cc-ukss:
  veuillez entrer le numéro du problème ou la date de début pour le type de carte commutateur / solo.
• min-mots:
  Veuillez saisir au moins {0} mots.
• alphanumérique:
  lettres, chiffres, espaces ou soulignements uniquement s'il vous plaît
• validate-identifier:
  veuillez entrer une clé URL valide (Ex: "exemple-page", "exemple-page.html" ou "autre niveau / exemple-page").
• validate-street:
  veuillez utiliser uniquement des lettres (az ou AZ), des chiffres (0-9), des espaces et "#" dans ce champ.
• validate-zip-international:
  Veuillez saisir un code postal valide.
• date de validation:
  veuillez saisir une date valide.
• valider-supérieur à zéro:
  veuillez saisir un nombre supérieur à 0 dans ce champ.
• validate-digits:
  Veuillez entrer un numéro valide dans ce champ.
• validate-ssn:
  Veuillez entrer un numéro de sécurité sociale valide (Ex: 123-45-6789).
• montant non négatif:
  veuillez saisir un nombre positif dans ce champ.
• validate-max-size: le
  fichier que vous essayez de télécharger dépasse la limite de taille de fichier maximale.
• validate-fax:
  Veuillez entrer un numéro de fax valide (Ex: 123-456-7890).
• validate-if-tag-script-exist:
  veuillez utiliser la balise SCRIPT avec l'attribut SRC ou avec un contenu approprié pour inclure JavaScript dans le document.
• min_text_length:
  veuillez saisir plus ou égal à {0} symboles.
• validate-date-au:
  Veuillez utiliser ce format de date: jj / mm / aaaa. Par exemple 17/03/2006 pour le 17 mars 2006.
• mobileUK:
  Veuillez spécifier un numéro de mobile valide
• lettres-avec-punc de base:
  lettres ou ponctuation uniquement s'il vous plaît
• validate-number-range:
  la valeur ne se trouve pas dans la plage spécifiée.
• phoneUS:
  Veuillez spécifier un numéro de téléphone valide
• date_range_max:
  la date n'est pas dans la plage spécifiée.
• validate-range:
  la valeur n'est pas dans la plage spécifiée.
• vinUS:
  le numéro d'identification du véhicule (VIN) spécifié n'est pas valide.
• mots-plage:
  veuillez saisir entre {0} et {1} mots.
• validate-zip-us:
  Veuillez entrer un code postal valide (Ex: 90602 ou 90602-1234).
• validate-emails:
  veuillez saisir des adresses e-mail valides, séparées par des virgules. Par exemple, [email protected], [email protected].
• validate-css-length:
  Veuillez saisir une longueur CSS valide (Ex: 100px, 77pt, 20em, .5ex ou 50%).
• zip-range:
  Votre code postal doit être compris entre 902xx-xxxx et 905-xx-xxxx
• validate-phoneStrict:
  Veuillez saisir un numéro de téléphone valide. Par exemple (123) 456-7890 ou 123-456-7890.
• dateNL:
  Vul hier een geldige datum in.
• lettres uniquement:
  lettres uniquement s'il vous plaît
• max_text_length:
  veuillez entrer moins ou égal à {0} symboles.
• numéro de validation non négatif:
  veuillez saisir un nombre égal ou supérieur à 0 dans ce champ.
• validate-per-page-value-list:
  Veuillez saisir une valeur valide, par exemple: 10,20,30
• sans espace:
  pas d'espace blanc s'il vous plaît
• validate-state:
  Veuillez sélectionner l'état / la province.
• validate-url:
  veuillez saisir une URL valide. Le protocole est requis (http: //, https: // ou ftp: //).
• date_range_min:
  la date n'est pas dans la plage spécifiée.
• validate-digits-range:
  la valeur n'est pas dans la plage spécifiée.
• supérieur à égal à:
  veuillez saisir une valeur supérieure ou égale à {0}.
• validate-no-empty:
  valeur vide.
• valider-zéro-ou-plus:
  Veuillez entrer un nombre 0 ou supérieur dans ce champ.
• validate-cc-number:
  veuillez saisir un numéro de carte de crédit valide.
• validate-emailSender:
  Veuillez saisir une adresse e-mail valide (Ex: [email protected]).
• validate-new-password:
  Veuillez saisir 6 caractères ou plus. Les espaces de début et de fin seront ignorés.
• validate-customer-password: la
  longueur minimale de ce champ doit être égale ou supérieure à% 1 symboles. Les espaces de début et de fin seront ignorés.
• validate-password:
  veuillez saisir 6 caractères ou plus. Les espaces de début et de fin seront ignorés.
• inférieur à égal à:
  veuillez saisir une valeur inférieure ou égale à {0}.
• validate-currency-dollar:
  Veuillez saisir un montant $ valide. Par exemple, 100,00 $.
• time12h:
  Veuillez entrer une heure valide, entre 00:00 am et 12:00 pm
• validate-alphanum:
  Veuillez utiliser uniquement des lettres (az ou AZ) ou des chiffres (0-9) dans ce champ. Aucun espace ou autre caractère n'est autorisé.
• validate-item-quantity:
  nous ne reconnaissons ni ne prenons en charge ce type d'extension de fichier.
• validate-code:
  veuillez utiliser uniquement des lettres (az), des chiffres (0-9) ou des traits de soulignement (_) dans ce champ, et le premier caractère doit être une lettre.
• email2:
  Veuillez entrer un numéro de carte de crédit valide.
• max-mots:
  Veuillez saisir {0} mots ou moins.
• stripped-min-length:
  veuillez saisir au moins {0} caractères
• validate-alpha:
  Veuillez utiliser uniquement des lettres (az ou AZ) dans ce champ.
• modèle:
  format non valide.
• entier:
  Un nombre non décimal positif ou négatif s'il vous plaît

Le script:

declare -A list
key=''
while IFS= read -r line; do
#  echo "${line} -"
  if [ -z "${key:-}" ]; then
    # match validation key
    match=$(echo "${line}" | grep -Eo "^        ['\"]([A-Za-z0-9-]|_)+" | tr -d "' ")
    if [ -n "${match}" ]; then
      key=${match}
    fi
  else
    # match message
    match=$(echo "${line}" | sed -rn "s|.*\\$\.mage\.__[(]['\"](.*)['\"][)].*|\1|p")
    if [ -n "${match}" ]; then
      list[${key}]=${match}
      key=''
    fi
  fi
done < "${DOCROOT_DIR:-/var/www/html}/vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js"

for i in "${!list[@]}"
do
  printf "%s:\n    %s\n" "${i}" "${list[$i]}"
done

Si vous prenez la référence de / customer / account / create page, vous pouvez voir le morceau de code suivant sous le formulaire:

<script>
require([
    'jquery',
    'mage/mage'
], function($){

    var dataForm = $('#form-validate');
    var ignore = null;

    dataForm.mage('validation', {
            ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
        }).find('input:text').attr('autocomplete', 'off');

});
</script>

Et si vous vérifiez les attributs d'entrée du formulaire, vous pouvez voir Magento 1 comme des classvaleurs d'attribut avec un nouvel data-validateattribut. Cela peut être la base pour intensifier.

Fichiers de clés pour la validation:

• https://raw.githubusercontent.com/magento/magento2/develop/lib/web/jquery/jquery.validate.js

• https://raw.githubusercontent.com/magento/magento2/develop/lib/web/mage/validation.js

• https://raw.githubusercontent.com/magento/magento2/develop/lib/web/mage/validation/validation.js

Lorsque vous utilisez des composants d'interface utilisateur pour créer un formulaire, nous pourrions utiliser la validation comme ci-dessous, cela fonctionne dans Magento 2.1.x, je ne le teste pas encore dans une autre version.

<field name="priority">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Priority</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">module_name</item>
            <item name="dataScope" xsi:type="string">priority</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
                <item name="validate-integer" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Remarquez l' élément de validation , nous pourrions y ajouter des règles de validation , comme required-entry, validate-integeretc.

<item name="validation" xsi:type="array">
     <item name="required-entry" xsi:type="boolean">true</item>
     <item name="validate-integer" xsi:type="boolean">true</item>
     <item name="validation_rule_name" xsi:type="boolean">true</item>
     ...
</item>

Toutes les règles de validation que vous pouvez trouver dans un fichier vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js, comme validate-date, validate-emailsetc.

J'ai la même exigence pour la validation de formulaire Magento2 et j'ai fait ce code

Nous allons d'abord configurer un formulaire de test

<!-- form tag -->
<form class="form" id="custom-form-id" method="post" autocomplete="off">
   <fieldset class="fieldset">
       <legend class="legend"><span><?php echo __('User Personal Information') ?></span></legend><br>
        <div class="field required">
            <!-- form field -->
            <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
            <div class="control">
                <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
            </div>
        </div>
   </fieldset>
   <!-- submit button -->
   <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
        </div>
    </div>
</form>

Pour activer la validation javascript pour la validation de formulaire Magento2

<!-- enable javascript validation for custom-form-id -->
<script type="text/x-magento-init">
    {
        "#custom-form-id": {
            "validation": {}
        }
    }
</script>

Référence :: http://www.onlinecode.org/magento2-form-validation-example/

L'option "sans espace" ne fonctionne pas correctement (au moins sur Magento 2.1). Il déclenche un message d'erreur sur tout type de caractère "espace". Les valeurs «testez-moi» et «testez-moi» renverront la même erreur.