Cómo agregar validación de campo de código postal en sus formularios

¿Le gustaría agregar validación de campo de código postal a su WPForms? Por defecto, al usar el campo Dirección, solo hay un lugar para ingresar un código postal junto con la dirección. Sin embargo, en este tutorial, le mostraremos cómo puede crear un campo que buscará sus códigos postales de servicio y fallará al enviar el formulario si el código postal no está en su área de servicio preferida.

Creación del formulario

Comenzaremos creando un nuevo formulario y agregando todos nuestros campos requeridos.

Agregaremos un campo de formulario de Texto de una sola línea que tendrá una máscara de entrada que servirá como nuestro campo de Código postal. Esto permitirá que, cuando se envíe el formulario, el fragmento tome el valor ingresado en este campo y lo compare con una lista de códigos postales que se encuentran en nuestra área de servicio. Si falla, el usuario verá un mensaje indicando que no damos servicio en esa área 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 de Texto de una sola línea aparezca como lo haría un campo de código postal estándar, agregaremos una máscara de entrada a este campo. Para lograr esto, haga clic en el campo y navegue a la pestaña Avanzado. Dentro del campo Máscara de entrada, ingrese 99999. Esto significa que este campo en particular solo aceptará 5 dígitos numéricos.

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

Aplicación de validación de código postal (solo en un formulario específico)

Ahora es el momento de agregar nuestro fragmento. Este primer ejemplo agregará validación de código postal a un solo formulario específico. Si necesita ayuda sobre cómo y dónde agregar fragmentos, revise 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 );

Analicemos este fragmento para explicar cada parte. La primera sección del fragmento busca si el ID del formulario que está mirando el fragmento coincide con el ID del formulario que hemos especificado en el fragmento. Para este ejemplo, este fragmento solo se ejecutará en el ID de formulario 3382.

La siguiente línea del fragmento busca el ID de campo 6 y obtiene el valor que se ingresó en el formulario. Una vez que tiene este valor, va a comparar ese valor ingresado con la lista de códigos postales que hemos ingresado en la matriz $zip_code_list. Deberá actualizar el ID del formulario, el ID del campo y actualizar los códigos postales que se muestran en esta matriz para que coincidan con sus propios códigos postales.

Una vez que haya realizado los ajustes en el fragmento, ahora notará que el formulario no procesará el envío del formulario si el código postal introducido no se encuentra en la lista de arrays de $zip_code_list.

Aplicar validación de 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 separado para cada formulario. En lugar de comprobar un ID de formulario y un ID de campo específicos, puede utilizar un fragmento alternativo que busque en el formulario enviado un campo cuya etiqueta coincida con una lista de etiquetas de códigos postales y luego 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 array $zip_labels, como zip, zip code o postal code. Cuando encuentra una coincidencia, trata ese campo como el campo de 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 en 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 array $zip_labels en el fragmento y agregar su propio texto de etiqueta para que el código solo se ejecute en los campos que espera.

Y eso es todo lo que necesita para agregar con éxito la validación de campos de código postal a un campo de Texto de una sola línea. ¿Desea también limitar los países que se muestran al usar el campo Dirección y el autocompletado? Eche un vistazo a nuestro tutorial sobre Cómo restringir el autocompletado de direcciones a un país específico.

Relacionado

Referencia de acción: wpforms_process