Como adicionar validação de campo de código postal nos 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 lugar para inserir um código postal junto com o endereço. No entanto, neste tutorial, vamos mostrar-lhe como pode criar um campo que irá procurar os seus códigos postais e falhar na submissão do formulário se o código postal não estiver na sua área de serviço preferida.

Criar o formulário

Vamos começar por criar um novo formulário e adicionar 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 falhar, o utilizador verá uma mensagem a indicar que, neste momento, não prestamos serviços nessa área.

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

Usando a máscara de entrada

Como queremos que o nosso campo de formulário de texto de linha única apareça como um campo de código postal padrão, vamos adicionar uma máscara de entrada a este campo. Para tal, clique no campo e navegue até ao separador Avançadas. No campo Input Mask (Máscara de entrada ), introduza 99999. Isto significa que este campo específico só aceitará 5 dígitos numéricos.

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

Aplicar validação de código postal (apenas num único formulário)

Agora é hora de adicionar o 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 dividir esse snippet para explicar cada parte. A primeira secção do snippet procura ver se o ID do formulário que o snippet está a ver corresponde ao ID do formulário que especificámos no snippet. Para este exemplo, este snippet só será executado no ID de 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. Assim que tiver este valor, vai comparar esse valor introduzido com a lista de códigos postais que introduzimos na matriz $zip_code_list. Terá de atualizar o ID do formulário, o ID do campo e atualizar os códigos postais que são apresentados nesta matriz para corresponderem 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 código postal 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, pode ser necessário 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 pesquisa o formulário enviado por 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 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 code, ou 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 nos seus formulários usem rótulos que correspondam a um dos valores em $zip_labels. Se os seus formulários utilizarem uma formulação diferente, pode editar o $zip_labels array no snippet e adicione o seu próprio texto de rótulo para que o código seja executado apenas nos campos que você deseja.

E é tudo o que precisa para adicionar com êxito a validação do campo do código postal a um campo de texto de linha única. Gostaria também de limitar os países que são apresentados quando utiliza o campo Endereço e o preenchimento automático? Veja o nosso tutorial sobre Como restringir o preenchimento automático de endereços a um país específico.

Relacionadas

Referência da ação: wpforms_process