Como adicionar validação de campo de CEP em seus formulários

Gostaria de adicionar a validação do campo de código postal aos seus 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 você pode criar um campo que pesquisará os códigos postais que podem ser atendidos e falhará ao enviar o formulário se o código postal não estiver em sua área de serviço preferencial.

Criando o formulário

Vamos começar criando um novo formulário e adicionando todos os nossos campos obrigatórios.

Adicionaremos um campo de formulário de texto de linha única que terá uma máscara de entrada que funcionará como nosso campo de CEP. Isso permitirá que, quando o formulário for enviado, o snippet pegue o valor inserido nesse campo e compare-o com uma lista de códigos postais que estão em nossa área de serviço. Se houver falha, o usuário verá uma mensagem informando que não atendemos a essa área no momento.

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

Usando a máscara de entrada

Como queremos que nosso campo de formulário de texto de linha única apareça como um campo de código postal padrão, adicionaremos uma máscara de entrada a esse campo. Para isso, clique no campo e navegue até a guia Advanced (Avançado ). No campo Input Mask (Máscara de entrada ), digite 99999. Isso significa que esse campo específico aceitará apenas 5 dígitos numéricos.

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

Aplicando a validação do código postal (apenas em um único formulário)

Agora é hora de adicionar nosso snippet. Este primeiro exemplo adicionará a validação do código postal apenas a um formulário específico. Se precisar de ajuda sobre como e onde adicionar snippets, consulte 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 esse snippet para explicar cada parte. A primeira seção do snippet procura ver se o ID do formulário que o snippet está analisando corresponde ao ID do formulário que especificamos no snippet. Para este exemplo, esse snippet será executado somente no ID do formulário 3382.

A próxima linha do snippet está procurando o campo ID 6 e pegando o valor que foi inserido no formulário. Quando tiver esse valor, ele comparará o valor inserido com a lista de códigos postais que inserimos na matriz $zip_code_list. Você precisará atualizar o ID do formulário, o ID do campo e atualizar os códigos postais exibidos nessa matriz para que correspondam aos seus próprios códigos postais.

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

Aplicando a validação do código postal (em vários formulários)

Em alguns casos, você 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, você pode usar um snippet alternativo que pesquisa o formulário enviado em busca de um campo cujo rótulo corresponda a uma lista de rótulos de código postal 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 trecho alternativo não depende de um ID de campo fixo. Ele percorre os campos do formulário, examina o rótulo de cada campo e tenta encontrar um rótulo que corresponda a um dos valores no $zip_labels matriz, como zip, zip codeou postal codeQuando encontra uma correspondência, trata esse campo como o campo do código postal e compara o seu valor com a mesma lista de códigos postais permitidos.

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

E isso é tudo o que você precisa para adicionar com êxito a validação do campo de CEP a um campo de texto de linha única. Gostaria de limitar também 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ços a um país específico.

Relacionado

Referência da ação: wpforms_process