Cómo añadir validación de campos de código postal en sus formularios

¿Le gustaría añadir la validación del campo de código postal a sus WPForms? Por defecto, cuando se utiliza el campo Dirección, sólo hay un lugar para introducir un código postal junto con la dirección. Sin embargo, en este tutorial, vamos a mostrarle cómo puede crear un campo que buscará sus códigos postales y fallará al enviar el formulario si el código postal no está en su área de servicio preferida.

Creación del formulario

Vamos a empezar creando un nuevo formulario y añadiendo todos los campos obligatorios.

Añadiremos un campo de formulario de texto de una sola línea que tendrá una máscara de entrada que funcionará como nuestro campo de código postal. Esto permitirá que cuando se envíe el formulario, el fragmento de código tome el valor introducido en este campo y lo compare con una lista de códigos postales de nuestra área de servicio. Si falla, el usuario verá un mensaje indicando que no prestamos servicio en esa zona en este momento.

Si necesita ayuda para crear formularios, consulte esta útil guía.

Uso de la máscara de entrada

Dado que queremos que nuestro campo de formulario Texto en una línea aparezca como lo haría un campo de código postal estándar, vamos a añadir una máscara de entrada a este campo. Para ello, haga clic en el campo y vaya a la pestaña Avanzado. En el campo Máscara de entrada, introduzca 99999. Esto significa que este campo en particular sólo aceptará 5 dígitos numéricos.

Para más información sobre máscaras de entrada en WPForms, por favor revise este tutorial para más ejemplos.

Aplicar la validación del código postal (solo en un formulario)

Ahora es el momento de añadir nuestro fragmento de código. Este primer ejemplo añadirá la validación del código postal solo a un formulario específico. Si necesita ayuda sobre cómo y dónde añadir fragmentos de código, consulte esta documentación.

/**
* Add zip code field validation.
*
* @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
*/
 
function wpf_dev_validate_zip_code( $fields, $entry, $form_data ) {
 
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form #3382.
 
    if ( absint( $form_data[ 'id' ] ) !== 3382 ) {
        return $fields;
    }
 
    // Get the value of the zip code field the user entered
    // Field ID for zip code field is '6'
    $zip_code = $fields[6][ 'value' ];
 
    // Zip code array, each zip code separated by a comma
    $zip_code_list = array(
    '85224',
    '85225',
    '85226',
    '85233',
    '85234',
    '85244',
    '85246',
    '85248',
    '85249',
    '85286',
    '85295',
    '85296',
    '85297',
    '85298',
    '85299'
    );
 
    if (!in_array($zip_code, $zip_code_list)) {
 
        // Check the field ID 75 and show an error message at the top of the form and under the specific field
        wpforms()->process->errors[ $form_data[ 'id' ] ]['6'] = esc_html__( 'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.', 'plugin-domain' );
    }
     
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code', 10, 3 );

Vamos a desglosar este fragmento para explicar cada parte. La primera sección del fragmento comprueba si el ID del formulario que está consultando coincide con el ID del formulario que hemos especificado en el fragmento. En este ejemplo, este fragmento sólo se ejecutará en el formulario ID 3382.

La siguiente línea del snippet busca el campo ID 6 y toma el valor introducido en el formulario. Una vez que tiene este valor, va a comparar ese valor introducido con la lista de códigos postales que hemos introducido en la matriz $zip_code_list. Usted tendrá que actualizar el ID del formulario, ID de campo y actualizar los códigos postales que se muestran en esta matriz para que coincida con sus propios códigos postales.

Una vez que hayas realizado los ajustes necesarios en el fragmento, verás que el formulario no procesará el envío si el código postal introducido no se encuentra en la lista de la matriz $zip_code_list.

Aplicación de la validación del código postal (en varios formularios)

En algunos casos, es posible que desee aplicar la misma validación de código postal a varios formularios diferentes sin crear un fragmento de código independiente para cada formulario. En lugar de comprobar un ID de formulario y un ID de campo específicos, puede utilizar un fragmento de código alternativo que busque en el formulario enviado un campo cuya etiqueta coincida con una lista de etiquetas de códigos postales y, a continuación, valide ese campo.

/**
 * Add zip code field validation across all forms, regardless of field ID.
 *
 * @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
 */
function wpf_dev_validate_zip_code_all_forms( $fields, $entry, $form_data ) {

    // Define accepted labels for ZIP code fields.
    $zip_labels = array( 'zip', 'zip code', 'postal code' );

    // Find the field ID by label.
    $zip_field_id = false;
    foreach ( $form_data['fields'] as $field_id => $field ) {
        if ( isset( $field['label'] ) && in_array( strtolower( trim( $field['label'] ) ), $zip_labels, true ) ) {
            $zip_field_id = $field_id;
            break;
        }
    }

    // If no matching field is found, skip validation.
    if ( ! $zip_field_id || empty( $fields[ $zip_field_id ]['value'] ) ) {
        return $fields;
    }

    // Get the value entered by the user.
    $zip_code = trim( $fields[ $zip_field_id ]['value'] );

    // Allowed ZIP codes.
    $zip_code_list = array(
        '85224',
        '85225',
        '85226',
        '85233',
        '85234',
        '85244',
        '85246',
        '85248',
        '85249',
        '85286',
        '85295',
        '85296',
        '85297',
        '85298',
        '85299'
    );

    // Validate entered ZIP code.
    if ( ! in_array( $zip_code, $zip_code_list, true ) ) {
        wpforms()->process->errors[ $form_data['id'] ][ $zip_field_id ] = esc_html__(
            'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.',
            'plugin-domain'
        );
    }

    return $fields;
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code_all_forms', 10, 3 );

Este fragmento alternativo no depende de un ID de campo fijo. Recorre los campos del formulario, examina la etiqueta de cada campo e intenta encontrar una etiqueta que coincida con uno de los valores del $zip_labels matriz, como zip, zip codeo postal code. Cuando encuentra una coincidencia, trata ese campo como el campo del código postal y compara su valor con la misma lista de códigos postales permitidos.

Dado que este fragmento utiliza etiquetas, es importante que los campos de código postal de sus formularios utilicen etiquetas que coincidan con uno de los valores de $zip_labels. Si sus formularios utilizan una redacción diferente, puede editar el $zip_labels matriz en el fragmento y añade tu propio texto de etiqueta para que el código solo se ejecute en los campos que esperas.

Y eso es todo lo que necesita para añadir con éxito la validación del campo de código postal a un campo de texto de una sola línea. ¿Desea limitar también los países que se muestran al utilizar el campo Dirección y autocompletar? Eche un vistazo a nuestro tutorial sobre Cómo restringir la función Autocompletar dirección a un país específico.

Relacionado

Acción Referencia: wpforms_process