Como Adicionar Validação de Campo de CEP em Seus Formulários

Gostaria de adicionar validação de campo de CEP ao seu WPForms? Por padrão, ao usar o campo Endereço, há apenas um local para inserir um CEP junto com o endereço. No entanto, neste tutorial, mostraremos como criar um campo que pesquisará seus CEPs atendidos e falhará ao enviar o formulário se o CEP não estiver em sua área de serviço preferida.

Criação do Formulário

Começaremos criando um novo formulário e adicionando 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 nosso campo de CEP. Isso permitirá que, quando o formulário for enviado, o trecho pegue o valor inserido neste campo e o compare com uma lista de CEPs que estão em nossa área de serviço. Se falhar, o usuário verá uma mensagem informando que não atendemos essa área no momento.

Se precisar de ajuda para criar formulários, confira este guia útil.

Usando a Máscara de Entrada

Como queremos que nosso campo de formulário Texto de Linha Única apareça como um campo de CEP padrão, adicionaremos uma máscara de entrada a este campo. Para conseguir isso, clique no campo e navegue até a guia Avançado. Dentro do campo Máscara de Entrada, insira 99999. Isso significa que este campo em particular aceitará apenas 5 dígitos numéricos.

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

Aplicando Validação de CEP (em Apenas um Formulário)

Agora é hora de adicionar nosso trecho. Este primeiro exemplo adicionará validação de CEP a apenas um formulário específico. Se precisar de alguma assistência sobre como e onde adicionar trechos, revise 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 detalhar este trecho para explicar cada parte. A primeira seção do trecho está verificando se o ID do formulário que o trecho está analisando corresponde ao ID do formulário que especificamos no trecho. Para este exemplo, este trecho só será executado no ID de formulário 3382.

A próxima linha do trecho está procurando o ID de campo 6 e obtendo o valor que foi inserido no formulário. Assim que tiver esse valor, ele comparará esse valor inserido com a lista de CEPs que inserimos no array $zip_code_list. Você precisará atualizar o ID do formulário, o ID do campo e atualizar os CEPs exibidos neste array para corresponder aos seus próprios CEPs.

Depois de fazer seus ajustes no snippet, você notará que o formulário não processará o envio se o CEP inserido não for encontrado na lista de arrays $zip_code_list.

Aplicando Validação de CEP (em Vários Formulários)

Em alguns casos, você pode querer aplicar a mesma validação de CEP a vários formulários diferentes sem criar um snippet separado para cada um. Em vez de verificar um ID de formulário e um ID de campo específicos, você pode usar um snippet alternativo que pesquisa no formulário enviado por um campo cujo rótulo corresponda a uma lista de rótulos de CEP 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. Ele 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, ele trata esse campo como o campo de CEP e compara seu valor com a mesma lista de CEPs permitidos.

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

E é tudo o que você precisa para adicionar com sucesso a validação de campo de CEP a um campo de Texto de Linha Única. Você também gostaria de limitar os países que são exibidos ao usar o campo Endereço e o preenchimento automático? Dê uma olhada em nosso tutorial sobre Como Restringir o Preenchimento Automático de Endereço a um País Específico.

Relacionado

Referência de Ação: wpforms_process