Comprender la validación de formularios de Magento

Publicado: 2021-05-31

Tabla de contenido

En nuestro artículo de hoy, aprenderemos sobre la validación de formularios en Magento 2 y cómo puede implementar mejor la validación de formularios en su tienda Magento.

Módulos de validación de formularios

En Magento, hay tres módulos principales para la validación de formularios que se basan y amplían la validación de jQuery.

  • /lib/web/jquery/jquery.validate.js : la validación base de jQuery
  • /lib/web/mage/validation.js : incluye las funciones básicas de validación y adición de jQuery, como $.validator.addMethod , que se puede usar para agregar reglas de validación personalizadas
  • /lib/web/mage/validation/validation.js : incluye mage/validation.js y agrega algunas reglas más al validador

Reglas de validación de formularios

De forma predeterminada, las reglas disponibles en Magento se almacenan en /validation/rules.js . Sin embargo, esas no son todas las reglas que puede usar. Como los módulos principales para la validación de formularios se basan en jQuery, puede utilizar los métodos de validación integrados de jQuery.

Cómo hacerlo

Crear reglas personalizadas

Como se mencionó anteriormente, puede crear reglas personalizadas creando una combinación de JavaScript para el módulo de mage/validation y llamando a $.validator.addMethod , así: 

 $.validator.addMethod(
  'nombre de la regla',
  función(valor, elemento) {
    // Devolver verdadero o falso después de verificar la regla de validación
  },
  $.mage.__('Mensaje de error para mostrar si falla la validación')
)

Y el siguiente código agregará una regla de validación al mixin para verificar si un campo de entrada tiene solo cinco palabras.

 Proveedor/Módulo/vista/frontend/requirejs-config.js 
 var configuración = {
  configuración: {
    mezclas: {
      'mago/validación': {
        'Vendor_Module/js/validation-mixin': verdadero
      }
    }
  }
}
 Proveedor/Módulo/vista/frontend/web/js/validation-mixin.js 
 define(['jquery'], función($) {
  'uso estricto';

  función de retorno() {
    $.validator.addMethod(
      'validar-cinco-palabras',
      función(valor, elemento) {
        valor devuelto.split(' ').longitud == 5;
      },
      $.mage.__('Por favor ingrese exactamente cinco palabras')
    )
  }
});

Modificar un mensaje de validación existente

El objeto de mensajes puede ser útil cuando solo necesita modificar un mensaje de validación existente sin cambiar la regla de validación.

Por ejemplo, en el siguiente código: 

 $('#formulario-para-validar').mage('validación', {
    mensajes: {
        'nombre de entrada': {
            'validation-rule-1': 'Mensaje de validación 1',
            'validation-rule-2': 'Mensaje de validación 2',
        },
    }
});

input-name es la clave del objeto y su valor es una lista de reglas de validación. Estas reglas de validación tienen mensajes de validación como su valor, que puede modificar libremente a su gusto.

Crear validaciones de formularios personalizados

Con la biblioteca de mage/validation , puede crear validaciones de formulario personalizadas antes de enviarlas al servidor.

Paso 1: Iniciar validaciones

Hay dos formas que puede usar para iniciar la validación del formulario:

Usando el atributo data-mage-init 
 <formulario data-mage-init='{"validación": {}}'>
    ...
</formulario>
Uso de la etiqueta de tipo de script text/x-magento-init 
 <script tipo="texto/x-magento-init">
    {
        "#mi-formulario": {
            "validación": {}
        }
    }
</script>

Paso 2: Definir reglas de validación para un campo de formulario

Hay varias formas de definir reglas de validación de formularios en Magento

como un atributo 
 <entrada... requerido="verdadero"/>
Como un atributo con argumentos 
 <input ... requerido="verdadero" minlength="15"/>
Como nombre de clase 
 <input ... class="entrada-texto requerido-entrada"/>
Como un nombre de clase con argumentos 
 <input ... class="texto de entrada requerido-entrada" minlength="15"/>
Como atributo data-validate : 
 <entrada... validación-datos='{"requerido":verdadero}'/>
Como un atributo data-validate con argumentos 
 <entrada... validación-datos='{"requerido":verdadero, "longitud mínima":10}'/>
Usando data-mage-init 
 <formulario... data-mage-init='{"validación": {"reglas": {"campo-1": {"requerido":verdadero}}}}'>
    ...
</formulario>
Usando data-mage-init con argumentos 
 <formulario... data-mage-init='{"validación": {"reglas": {"campo-1": {"requerido":verdadero, "longitud mínima":20}}}}'>
    ...
</formulario>

Ejemplos

Aquí intentaremos crear campos de formulario, junto con formularios de validación para cada campo usando diferentes métodos de validación. 

 <form class="form" method="post" data-mage-init='{"validación":{"reglas": {"campo-4": {"requerido":verdadero}}}}'>
    <clase de conjunto de campos="conjunto de campos">
        <div class="nombre de campo requerido">
            <label class="label" for="field-1"><span>Campo 1 (usando validación de datos)</span></label>
            <div clase="controlar">
                <input name="field-1" title="Field 1" value="" class="input-text" type="text" data-validate='{"requerido":verdadero, "url": verdadero}' />
            </div>
        </div>
        <div class="nombre de campo requerido">
            <label class="label" for="field-2"><span>Campo 2 (usando atributo)</span></label>
            <div clase="controlar">
                <input name="field-2" title="Field 2" value="" class="input-text" type="text" required="true"/>
            </div>
        </div>
        <div class="nombre de campo requerido">
            <label class="label" for="field-3"><span>Campo 3 (usando classname)</span></label>
            <div clase="controlar">
                <input name="field-3" title="Field 3" value="" type="text" class="input-text requerido-entrada"/>
            </div>
        </div>
        <div class="nombre de campo requerido">
            <label class="label" for="field-4"><span>Campo 4 (usando data-mage-init)</span></label>
            <div clase="controlar">
                <input name="field-4" title="Field 4" value="" class="input-text" type="text"/>
            </div>
        </div>
    </conjunto de campos>
    <div class="barra de herramientas de acciones">
        <div clase="principal">
            <button type="enviar" title="Enviar" class="acción enviar primaria">
                <span>Enviar</span>
            </botón>
        </div>
    </div>
</formulario>

Usando los campos anteriores y las validaciones de formulario, su resultado debería verse así:

Validación de formularios en Magento 2