Contact Form 7

Los artículos de la categoría Manual del desarrollador abordan temas que requieren conocimiento técnico. Ten cuidado y utiliza las técnicas descritas a continuación bajo tu propia responsabilidad. Si no tienes experiencia en desarrollo, y necesitas ayuda, te recomendamos solicitar el apoyo de un profesional.

This page is also available in English.

En esta receta, aprenderás a implementar una validación de entrada de usuario que establece el límite máximo de selección de casillas de verificación. Esta validación se basa en el mecanismo Schema-Woven Validation (SWV), por lo que tiene algunas grandes ventajas sobre la validación anterior basada en filtros, tales como:

• Puedes utilizar reglas de validación ya definidas por SWV, por lo que no necesitas codificar la lógica de validación por ti mismo.
• Una vez creada una regla de validación SWV, esta puede funcionar en cualquier lugar siempre que sea compatible con SWV. Por otro lado, la validación basada en filtros sólo funciona en el lado del servidor.

Muy bien, comencemos.

En primer lugar, supongamos que tienes un grupo de casillas de verificación para seleccionar pingüinos en tu formulario (¿Por qué pingüinos? Es sólo un ejemplo, no te lo tomes demasiado en serio 🙂 ):

[checkbox tus-pinguinos "Pingüino de Adelia" "Pingüino emperador" "Pingüino papúa" "Pingüino chico" "Pingüino de Humboldt" "Pingüino roquero austral" "Pingüino de las Galápagos"]

Como puede ver en la etiqueta del formulario, tus-pinguinos es el nombre del campo y tiene siete opciones de especies de pingüinos.

Hagamos que permita una selección de hasta tres opciones a la vez y que muestre un error de validación cuando se seleccionan más de tres. Usando el tipo de regla predefinida maxitems, puedes implementar esta validación fácilmente. Mira el siguiente fragmento de código PHP:

add_action(
    'wpcf7_swv_create_schema',
    function ( $schema, $contact_form ) {
        $schema->add_rule(
            wpcf7_swv_create_rule( 'maxitems', array(
                'field' => 'tus-pinguinos',
                'threshold' => 3,
                'error' => "¡Haz seleccionado muchos pingüinos!",
            ) )
        );
    },
    10, 2
);

En este código, es importante tener en cuenta los siguientes puntos:

• Debes usar el gancho de acción wpcf7_swv_create_schema para añadir reglas SWV
• El primer parámetro pasado a la función de retorno de la acción ($schema) es el objeto del schema. Al llamar al método add_rule() puedes añadir una regla al schema.
• La función wpcf7_swv_create_rule() crea una regla. El primer parámetro debe ser uno de los tipos de reglas predefinidos. En este ejemplo, se usa maxitems.
• El segundo parámetro pasado a wpcf7_swv_create_rule() es una matriz asociativa (array) que representa las propiedades de la regla. Para una regla maxitems, las propiedades field, threshold y error deben especificarse.
• La propiedad field se refiere al nombre del campo a seleccionar. En este ejemplo, es tus-pinguinos.
• La propiedad threshold se refiere al número máximo de elementos que puedes seleccionar a la vez. En este ejemplo, hemos establecido 3.
• La propiedad error indica el mensaje de validación que se mostrará cuando la solicitud no cumpla con la regla establecida. En este ejemplo, el mensaje aparecería si se seleccionan más de tres pingüinos.

Eso es todo. Con estas diez líneas de código, puedes implementar una validación de entrada de usuario completa que funciona tanto en el lado del servidor como en el lado del cliente. Bastante sencillo, ¿verdad?

Para confirmarlo, intenta enviar una petición HTTP de tipo GET como la siguiente:

GET {URL del sitio}/wp-json/contact-form-7/v1/contact-forms/{ID del formulario de contacto}/feedback/schema

Si funciona correctamente, encontrarás la regla que has añadido en la respuesta:

{
        "rule": "maxitems",
        "field": "tus-pinguinos",
        "threshold": 3,
        "error": "¡Haz seleccionado muchos pingüinos!"
}