Magento 2 - Validación de formulario

¿Hay una descripción general de los nuevos atributos de validación de formularios en Magento 2?

Puede agregar clase para validación en Magento 2. Vea el ejemplo a continuación. Hay casi 72 reglas (clase de validación) que puede usar:

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

Consulte el blog para obtener una lista de las reglas disponibles para obtener más información:

Aquí hay una lista de las reglas de validación de clases compatibles con magento 2. Solo necesita agregar la clase css para que se aplique la regla.

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

Hay 3 formas diferentes de usar la validación de formularios en magento 2

Para habilitar la validación de JavaScript, use el siguiente código en su plantilla

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

* formulario personalizado es id de formulario, puede reemplazarlo con su id. de formulario

Lista de reglas de validación de formularios

Para finalizar este artículo, aquí se proporciona una lista de nombres de reglas de validación como referencia rápida hacia la documentación oficial:

Reglas 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

Reglas de jQuery:

required,

remote,

email,

url,

date,

dateISO,

number,

digits,

creditcard,

equalTo,

maxlength,

minlength,

rangelength,

range,

max,

min

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

En los componentes de la IU se puede usar siguiendo la configuración de muestra (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>

Ver más ejemplos en el archivo:
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml

La lista de validadores en UI Components se puede encontrar en
vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js.

Acabo de escribir este script para obtener todas las claves con mensajes de error para su explicación:

• entrada obligatoria:
  este es un campo obligatorio.
• validate-alphanum-with-spaces:
  utilice solo letras (az o AZ), números (0-9) o espacios solo en este campo.
• phoneUK:
  especifique un número de teléfono válido
• validate-email:
  Ingrese una dirección de correo electrónico válida (Ej: [email protected]).
• ipv4:
  ingrese una dirección IP v4 válida.
• marcado:
  este es un campo obligatorio.
• validar-seleccionar:
  seleccione una opción.
• ipv6:
  ingrese una dirección IP v6 válida.
• hora:
  ingrese una hora válida, entre 00:00 y 23:59
• validate-number:
  ingrese un número válido en este campo.
• validate-phoneLax:
  Ingrese un número de teléfono válido. Por ejemplo (123) 456-7890 o 123-456-7890.
• dateITA:
  Ingrese una fecha correcta
• validate-xml-identifier:
  ingrese un identificador XML válido (Ej: something_1, block5, id-4).
• validate-clean-url:
  ingrese una URL válida. Por ejemplo, http://www.example.com o www.example.com.
• validate-admin-password:
  ingrese 7 o más caracteres, utilizando tanto numéricos como alfabéticos.
• validate-no-html-tags: las
  etiquetas HTML no están permitidas.
• validate-integer:
  ingrese un número entero válido en este campo.
• validate-data:
  utilice solo letras (az o AZ), números (0-9) o guión bajo (_) en este campo, y el primer carácter debe ser una letra.
• validate-cc-ukss:
  ingrese el número de emisión o la fecha de inicio para el tipo de tarjeta de interruptor / solo.
• min-palabras:
  ingrese al menos {0} palabras.
• alfanumérico:
  letras, números, espacios o guiones bajos solo por favor
• validar-identificador:
  ingrese una clave de URL válida (por ejemplo, "página de ejemplo", "página de ejemplo.html" u "otro nivel / página de ejemplo").
• validate-street:
  utilice solo letras (az o AZ), números (0-9), espacios y "#" en este campo.
• validate-zip-international:
  ingrese un código postal válido.
• validate-date:
  ingrese una fecha válida.
• validar-mayor que cero:
  Ingrese un número mayor que 0 en este campo.
• validate-digits:
  ingrese un número válido en este campo.
• validate-ssn:
  ingrese un número de seguro social válido (Ej: 123-45-6789).
• cantidad no negativa:
  ingrese un número positivo en este campo.
• validate-max-size: el
  archivo que está intentando cargar supera el límite máximo de tamaño de archivo.
• validar-fax:
  ingrese un número de fax válido (Ej: 123-456-7890).
• validate-if-tag-script-exist:
  utilice la etiqueta SCRIPT con el atributo SRC o con el contenido adecuado para incluir JavaScript en el documento.
• min_text_length:
  ingrese más o igual que {0} símbolos.
• validate-date-au:
  utilice este formato de fecha: dd / mm / aaaa. Por ejemplo 17/03/2006 para el 17 de marzo de 2006.
• mobileUK:
  especifique un número de móvil válido
• letter-with-basic-punc:
  letras o puntuación solo por favor
• validate-number-range:
  el valor no está dentro del rango especificado.
• phoneUS:
  especifique un número de teléfono válido
• date_range_max:
  la fecha no está dentro del rango especificado.
• validate-range:
  el valor no está dentro del rango especificado.
• vinUS:
  el número de identificación del vehículo (VIN) especificado no es válido.
• rango-palabras:
  Ingrese entre {0} y {1} palabras.
• validate-zip-us:
  Ingrese un código postal válido (Ej: 90602 o 90602-1234).
• validate-emails:
  ingrese direcciones de correo electrónico válidas, separadas por comas. Por ejemplo, [email protected], [email protected].
• validate-css-length:
  ingrese una longitud CSS válida (Ej: 100px, 77pt, 20em, .5ex o 50%).
• rango postal:
  su código postal debe estar en el rango de 902xx-xxxx a 905-xx-xxxx
• validate-phoneStrict:
  ingrese un número de teléfono válido. Por ejemplo (123) 456-7890 o 123-456-7890.
• dateNL:
  Vul hier een geldige datum in.
• solo
  letras : solo letras por favor
• max_text_length:
  ingrese menos o igual que {0} símbolos.
• validar-no-número-negativo:
  ingrese un número 0 o mayor en este campo.
• validate-per-page-value-list:
  ingrese un valor válido, por ejemplo: 10,20,30
• sin espacios en blanco: sin espacios en
  blanco, por favor
• validar-estado:
  Seleccione Estado / Provincia.
• validate-url:
  ingrese una URL válida. Se requiere protocolo (http: //, https: // o ftp: //).
• date_range_min:
  la fecha no está dentro del rango especificado.
• validate-digits-range:
  el valor no está dentro del rango especificado.
• mayor que igual a:
  ingrese un valor mayor o igual a {0}.
• validate-no-empty:
  Valor vacío.
• validar-cero-o-mayor:
  Ingrese un número 0 o mayor en este campo.
• validate-cc-number:
  ingrese un número de tarjeta de crédito válido.
• validate-emailSender:
  Ingrese una dirección de correo electrónico válida (Ej: [email protected]).
• validate-new-password:
  ingrese 6 o más caracteres. Los espacios iniciales y finales serán ignorados.
• validate-customer-password: la
  longitud mínima de este campo debe ser igual o mayor que% 1 símbolos. Los espacios iniciales y finales serán ignorados.
• validate-password:
  ingrese 6 o más caracteres. Los espacios iniciales y finales serán ignorados.
• menor que igual a:
  ingrese un valor menor o igual a {0}.
• validar-moneda-dólar:
  ingrese una cantidad válida de $. Por ejemplo $ 100.00.
• hora12h:
  Ingrese una hora válida, entre las 00:00 a.m. y las 12:00 p.m.
• validar-alfanum:
  utilice solo letras (az o AZ) o números (0-9) en este campo. No se permiten espacios u otros caracteres.
• validar-cantidad-artículo:
  No reconocemos ni admitimos este tipo de extensión de archivo.
• validate-code:
  utilice solo letras (az), números (0-9) o guión bajo (_) en este campo, y el primer carácter debe ser una letra.
• email2:
  ingrese un número de tarjeta de crédito válido.
• max-words:
  ingrese {0} palabras o menos.
• stripped-min-length:
  ingrese al menos {0} caracteres
• validate-alpha:
  utilice solo letras (az o AZ) en este campo.
• patrón:
  formato no válido.
• entero:
  un número no decimal positivo o negativo, por favor

La secuencia de comandos:

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 toma la referencia de / customer / account / create page, puede ver el siguiente código debajo del formulario:

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

Y si marca los atributos de entrada del formulario, puede ver Magento 1 como classvalores de atributo junto con un nuevo data-validateatributo. Esta puede ser la base para intensificar.

Archivos de claves para validación:

• 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

Cuando utilizamos componentes de la interfaz de usuario para hacer el formulario, podríamos usar la validación como se muestra a continuación, funciona en Magento 2.1.x, todavía no lo pruebo en otra versión.

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

Observe el elemento de validación , en él podríamos agregar reglas de validación , como 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>

Todas las reglas de validación que puede encontrar en el archivo vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js, como validate-date, validate-emailsetc.

Tengo el mismo requisito para la validación de formularios de Magento2 e hice este código

Primero configuraremos un formulario de prueba

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

Para habilitar la validación de JavaScript para la validación de formularios de Magento2

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

Referencia :: http://www.onlinecode.org/magento2-form-validation-example/

La opción "sin espacios en blanco" no funciona correctamente (al menos en Magento 2.1). Activa un mensaje de error en cualquier tipo de carácter "espacio". Los valores "probarme" y "probarme" devolverán el mismo error.