Como Adicionar Validação de Campo de Código Postal aos Seus Formulários

Gostaria de adicionar validação de campo de código postal ao seu WPForms? Por defeito, ao utilizar o campo Morada, existe apenas um local para inserir um código postal juntamente com a morada. No entanto, neste tutorial, vamos mostrar como pode criar um campo que irá pesquisar os seus códigos postais de serviço e falhar na submissão do formulário se o código postal não estiver na sua área de serviço preferida.

Criação do Formulário

Vamos começar por criar um novo formulário e adicionar todos os nossos campos necessários.

Adicionaremos um campo de formulário Texto de Linha Única que terá uma máscara de entrada que servirá como o nosso campo Código Postal. Isto permitirá que, quando o formulário for submetido, o trecho pegue o valor inserido neste campo e o compare com uma lista de códigos postais que está na nossa área de serviço. Se falhar, o utilizador verá uma mensagem a indicar que não prestamos serviço nessa área neste momento.

Se precisar de ajuda na criação de formulários, consulte este guia útil.

Utilizar a Máscara de Entrada

Como queremos que o nosso campo de formulário Texto de Linha Única apareça como um campo de código postal normal, vamos adicionar uma máscara de entrada a este campo. Para conseguir isto, clique no campo e navegue até ao separador Avançadas. Dentro do campo Máscara de Entrada, insira 99999. Isto significa que este campo em particular só aceitará 5 dígitos numéricos.

Para mais informações sobre máscaras de entrada no WPForms, reveja este tutorial para mais exemplos.

Aplicar Validação de Código Postal (apenas num formulário específico)

Agora é hora de adicionar o nosso trecho. Este primeiro exemplo adicionará validação de código postal a apenas um formulário específico. Se precisar de alguma assistência sobre como e onde adicionar trechos, reveja esta documentação.

/**
* 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 analisar este trecho para explicar cada parte. A primeira secção do trecho procura ver se o ID do formulário que o trecho está a analisar corresponde ao ID do formulário que especificámos no trecho. Para este exemplo, este trecho só será executado no ID de formulário 3382.

A linha seguinte do trecho procura o ID de campo 6 e obtém o valor que foi inserido no formulário. Assim que tiver este valor, irá compará-lo com a lista de códigos postais que inserimos na matriz $zip_code_list. Terá de atualizar o ID do formulário, o ID do campo e atualizar os códigos postais exibidos nesta matriz para corresponder aos seus próprios códigos postais.

Depois de fazer os seus ajustes ao snippet, notará agora que o formulário não processará o envio do formulário se o código postal inserido não for encontrado na lista de arrays $zip_code_list.

Aplicação de Validação de Código Postal (em Múltiplos Formulários)

Em alguns casos, pode querer aplicar a mesma validação de código postal a vários formulários diferentes sem criar um snippet separado para cada formulário. Em vez de verificar um ID de formulário e um ID de campo específicos, pode usar um snippet alternativo que procura no formulário enviado um campo cujo rótulo corresponda a uma lista de rótulos de códigos postais e, em seguida, valida esse 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 snippet alternativo não depende de um ID de campo fixo. Percorre os campos do formulário, verifica o rótulo de cada campo e tenta encontrar um rótulo que corresponda a um dos valores no array $zip_labels, como zip, zip code ou postal code. Quando encontra uma correspondência, trata esse campo como o campo de código postal e compara o seu valor com a mesma lista de códigos postais permitidos.

Como este snippet usa rótulos, é importante que os campos de código postal nos seus formulários usem rótulos que correspondam a um dos valores em $zip_labels. Se os seus formulários usarem uma redação diferente, pode editar o array $zip_labels no snippet e adicionar o seu próprio texto de rótulo para que o código só seja executado nos campos que espera.

E é tudo o que precisa para adicionar com sucesso a validação de campo de código postal a um campo de Texto de Linha Única. Gostaria também de limitar os países que são exibidos ao usar o campo Morada e o autocompletar? Dê uma vista de olhos no nosso tutorial sobre Como Restringir o Autocompletar de Moradas a um País Específico.

Relacionado

Referência de Ação: wpforms_process