Usando o Criador de formulário › Como usar funções JavaScript em campos › Como validar a entrada de usuário › Como usar uma função JavaScript para validar o formato de números de cartão de crédito

Como usar uma função JavaScript para validar o formato de números de cartão de crédito

Este tópico explica como configurar o Designer de formulários para usar uma função JavaScript a fim de verificar se os usuários inseriram o número de cartão de crédito no formato correto para o tipo de cartão de crédito especificado. Esse processo não autentica os dados inseridos pelo usuário, mas ajuda no processo de validação ao verificar o formato.

Observação: também é possível usar expressões regulares para validar o formato de números de cartão de crédito e outros tipos de dados comumente solicitados, como número do seguro social, endereços de email, números de telefone, e assim por diante.

Este tópico explica como apresentar dois tipos de cartão de crédito: Master Card e Visa. Para cada tipo, crie uma opção de grupo de rádios e um campo de texto para o número da conta. Cada campo de número de conta está desativado no projeto, mas é ativado se o usuário seleciona o tipo de cartão de crédito correspondente.

Use a função JavaScript predefinida chamada ca_fdValidateCC(número, 'tipo') para validar o formato do número do cartão de crédito digitado pelo usuário, com base no tipo de cartão de crédito que o usuário selecionou. Essa função JavaScript verifica o formato de acordo com as especificações definidas pela administradora de cartão de crédito. Cada empresa define seu próprio formato padrão.

Para verificar os números de cartão de crédito digitados pelos usuários, execute estas etapas. Estas etapas usam um exemplo contínuo para fins de ilustração.

1. Projete e crie o formulário, se ainda não tiver feito isso.
2. Verifique se o valor do atributo HTML do formulário chamado _id especifica um nome significativo, como ccValdtnForm1.
3. Adicione um grupo de botões de opção; ele é um dos elementos de um formulário.
   1. Para o valor do atributo _id do grupo de botões de opção, especifique um nome significativo, como rgCCVal, e salve o formulário.
   2. Renomeie o "Grupo de Rádios" com um nome ou frase significativo, como Selecione um cartão de crédito ou tipo de cartão de crédito.
4. Adicione a primeira opção do grupo de rádios; essas opções são elementos de um formulário que se aplicam somente a grupos de rádios.
   1. Para o atributo _id, especifique um nome significativo, como mcard (o que significa opção de grupo de rádios do Master Card), e salve o formulário.
   2. Renomeie "Rádio" com um nome significativo, como Master Card.
5. Adicione uma segunda opção de grupo de rádios.
   1. Para o atributo _id, especifique um nome significativo, como visa (o que significa opção de grupo de rádios do Visa), e salve o formulário.
   2. Renomeie "Rádio" com um nome significativo, como Visa.
6. Adicionar um campo de texto ao formulário
   1. Para o atributo _id, especifique um nome significativo, como ccf.
   2. Para o valor do atributo JavaScript chamado onvalidate, especifique cc_val(_val).
7. Na sua biblioteca JavaScript personalizada, adicione a seguinte definição de função.

   Observação: como melhor prática, use custom_form_lib.js no diretório como biblioteca JavaScript personalizada. Para obter detalhes sobre como configurar o diretório, consulte o Guia de Implementação.

   function cc_val(value) {
                   var ccname = '';
                   if (ca_fdIsSelectRadio('ccValdtnForm1', 'rgCCVal', 'mcard'))
                                   ccname = 'master';
                   else
                                   ccname = 'visa';
                   ca_fdValidateCC(value, ccname);
   }
   

8. Conclua criando o formulário que atenda aos seus requisitos.
9. Teste o formulário para verificar se ele funciona como esperado.

Como melhor prática, verifique se você testou o formulário em um serviço em um ambiente de teste antes de usar o formulário e o serviço em um ambiente de produção.