{"id":8737,"date":"2024-05-09T12:46:31","date_gmt":"2024-05-09T11:46:31","guid":{"rendered":"https:\/\/www.verificaremails.com\/kb\/como-usar-o-widget-para-validar-formularios\/"},"modified":"2025-02-06T20:51:40","modified_gmt":"2025-02-06T19:51:40","slug":"como-usar-o-widget-para-validar-formularios","status":"publish","type":"kb","link":"https:\/\/www.verificaremails.com\/pt-br\/kb\/como-usar-o-widget-para-validar-formularios\/","title":{"rendered":"Como usar o widget para validar formul\u00e1rios"},"content":{"rendered":"

Na Verificaremails, desenvolvemos um widget para validar formul\u00e1rios que permite verificar em tempo real os dados que voc\u00ea captura por meio de formul\u00e1rios da Web. Usando nosso assistente, voc\u00ea pode implementar servi\u00e7os de verifica\u00e7\u00e3o em qualquer formul\u00e1rio da Web para verificar e-mails, validar n\u00fameros de telefone, endere\u00e7os postais, nomes e sobrenomes.<\/p>\n

Onde devo criar o widget para validar formul\u00e1rios?<\/h2>\n

Para implementar o widget em qualquer formul\u00e1rio, voc\u00ea deve fazer login em nosso portal e selecionar no menu do lado esquerdo a se\u00e7\u00e3o“WidgetJS<\/a>“.<\/p>\n

Ser\u00e1 exibida uma visualiza\u00e7\u00e3o onde voc\u00ea ver\u00e1 os widgets ativos e poder\u00e1 criar novos widgets usando o bot\u00e3o superior “+Create new widget”.<\/p>\n

Para usar o widget, voc\u00ea precisa ter uma API do servi\u00e7o que deseja usar. Lembre-se de que voc\u00ea pode usar simultaneamente v\u00e1rios servi\u00e7os de verifica\u00e7\u00e3o para validar em conjunto: nomes, e-mails, n\u00fameros de telefone…<\/p>\n

Configura\u00e7\u00e3o do widget de verifica\u00e7\u00e3o de formul\u00e1rio<\/h2>\n

Antes de come\u00e7ar, recomendamos que voc\u00ea assista ao v\u00eddeo sobre como o servi\u00e7o funciona. A implementa\u00e7\u00e3o do Widget n\u00e3o \u00e9 complexa, mas requer um m\u00ednimo de conhecimento t\u00e9cnico. O uso de um widget para verifica\u00e7\u00e3o permite reduzir a implementa\u00e7\u00e3o do servi\u00e7o de verifica\u00e7\u00e3o em um formul\u00e1rio de dias\/horas para minutos.<\/p>\n

\"Formul\u00e1rios<\/p>\n

Etapa 1 – Introdu\u00e7\u00e3o<\/h3>\n

Primeiro, voc\u00ea precisar\u00e1 inserir um nome para identificar o Widget. Use um nome que permita identificar a quais formul\u00e1rios voc\u00ea aplica a verifica\u00e7\u00e3o de campo. Lembre-se de que voc\u00ea pode verificar mais de um campo no mesmo formul\u00e1rio.<\/p>\n

Etapa 2 – Selecione os servi\u00e7os<\/h3>\n

Se voc\u00ea tiver criado anteriormente as APIs para os campos que deseja verificar, elas ser\u00e3o listadas em cada servi\u00e7o. Se voc\u00ea ainda n\u00e3o as criou, v\u00e1 para a se\u00e7\u00e3o APIs<\/a> no menu de navega\u00e7\u00e3o \u00e0 esquerda.<\/p>\n

\"Sele\u00e7\u00e3o<\/p>\n

Etapa 3 – Configurar servi\u00e7os<\/h3>\n

Para cada um dos servi\u00e7os, voc\u00ea ter\u00e1 de selecionar se valida apenas os campos com resultado de valida\u00e7\u00e3o “OK” ou se tamb\u00e9m aceita os campos duvidosos. Por exemplo, no caso de verifica\u00e7\u00e3o de endere\u00e7o de correio eletr\u00f4nico. Voc\u00ea pode ter e-mails que passam na valida\u00e7\u00e3o. Nesse caso, ele ser\u00e1 marcado como “OK”, mas tamb\u00e9m podemos ter e-mails duvidosos, como aqueles que retornam “ok_for_all” ou “accept_all”. Agrupamos esse tipo de correspond\u00eancia na categoria “inconclusivo”.<\/p>\n

\"Selecione<\/p>\n

Voc\u00ea deve decidir se vai permitir que o usu\u00e1rio registre esses e-mails. Isso n\u00e3o significa que o endere\u00e7o de e-mail seja inv\u00e1lido. Simplesmente n\u00e3o podemos verificar isso de forma confi\u00e1vel. O mesmo se aplica aos outros campos: n\u00fameros de telefone, endere\u00e7os postais, nomes…<\/p>\n

Na se\u00e7\u00e3o “Seletores DOM dos elementos”<\/strong>, identificamos o elemento DOM que cont\u00e9m o campo a ser validado, no nosso caso, o e-mail. H\u00e1 v\u00e1rias maneiras de definir esse campo aqui.<\/p>\n

No nosso exemplo, se voc\u00ea tiver um formul\u00e1rio, onde o formul\u00e1rio tem um id=”frmSS134″<\/strong> e o valor contido no campo de e-mail \u00e9 chamado de name=”email”<\/strong>.<\/p>\n

Ex:
\n<form method=”post” action=”https:\/\/www.marketingdeexperiencias.com\/iris\/form.php?form=134″ id=”frmSS134″ onsubmit=”return CheckForm134(this);”><\/em>
\n<table border=”0″ cellpadding=”2″ cellpadding=”2″ table border=”0″ cellpadding=”2″ cellpadding=”1><\/em>
\n<tr><\/em>
\n<td><span>*<\/span> <\/em>
\nSeu endere\u00e7o de e-mail:<\/td><\/em>
\n<td><input type=”text” name=”email” value=”” \/><\/td><\/em><\/p>\n

No campo “DOM selectors of the elements” (Seletores DOM dos elementos), devemos inserir
\n# frmSS134 [name=\u2019email\u2019]<\/strong><\/p>\n

\"Widget<\/p>\n

Se voc\u00ea n\u00e3o souber como identific\u00e1-lo, a maneira mais f\u00e1cil \u00e9 inserir “id” no campo HTML que cont\u00e9m o campo a ser validado. Voc\u00ea deve indicar esse campo como #nome_do_campo.<\/p>\n

Por exemplo, se tivermos um campo “email” definido como:<\/p>\n

<input type=”text” id=field_name name=”email” value=”” \/><\/em><\/p>\n

Nesse caso, devemos inserir no campo “DOM selectors of the elements” (seletores DOM dos elementos<\/strong>).
\n# nome_do_campo<\/strong> (o nome deve come\u00e7ar com uma letra)<\/p>\n

\"Campo<\/p>\n

Em vez de “ID”, tamb\u00e9m podemos usar classes para identificar campos:
\n.meu_formul\u00e1rio .meu_campo<\/strong><\/p>\n

Outra combina\u00e7\u00e3o \u00e9 usar o identificador do formul\u00e1rio com o nome do campo, resultando em:
\n#mi_formulario . [name=\u2019nombre_del_campo\u2019]<\/strong><\/p>\n

Se tudo isso for muito complicado, passe essas informa\u00e7\u00f5es para o seu desenvolvedor e ele as integrar\u00e1 sem problemas. Para algu\u00e9m que est\u00e1 acostumado a trabalhar com CSS, isso n\u00e3o deve ser complicado.<\/p>\n

Usar o Widget em vez de ter que fazer o desenvolvimento personalizado permite que voc\u00ea implemente a funcionalidade de verifica\u00e7\u00e3o de formul\u00e1rio em minutos, em vez de ter que gastar horas de trabalho implementando seu pr\u00f3prio servi\u00e7o de verifica\u00e7\u00e3o.<\/p>\n

Etapa 4 – Configura\u00e7\u00e3o de erros<\/h3>\n

Nesta se\u00e7\u00e3o, vamos configurar como exibir mensagens de erro. Voc\u00ea pode alterar os estilos de exibi\u00e7\u00e3o de campos com erros por meio do campo “Tipo de erro”<\/strong>. Aqui temos que decidir se usaremos “Styles”<\/strong> ou “Classes”<\/strong> para indicar que h\u00e1 um erro no formul\u00e1rio.<\/p>\n

\"Sele\u00e7\u00e3o<\/p>\n

No nosso caso, selecionamos “Styles” (Estilos). Isso nos permite indicar diretamente os estilos no assistente. Para evitar que o processo de valida\u00e7\u00e3o afete a taxa de registro do formul\u00e1rio, fizemos com que a verifica\u00e7\u00e3o do campo fosse acionada no evento “mudar o foco”.<\/p>\n

No nosso caso, o que faremos \u00e9 mostrar uma linha vermelha no campo que falha quando o usu\u00e1rio muda o foco do campo “email” para outro elemento.<\/p>\n

Nessa mesma se\u00e7\u00e3o, temos duas op\u00e7\u00f5es adicionais. A op\u00e7\u00e3o “Gerenciar envio de formul\u00e1rio”<\/strong> permite que voc\u00ea bloqueie o envio de dados at\u00e9 que eles sejam inv\u00e1lidos. Lembre-se de que podemos definir quais s\u00e3o os dados v\u00e1lidos para cada servi\u00e7o na op\u00e7\u00e3o “Configurar servi\u00e7os”<\/strong>. Se desativarmos a op\u00e7\u00e3o “Gerenciar envio de formul\u00e1rio”<\/strong>, o desenvolvedor poder\u00e1 usar as fun\u00e7\u00f5es “await widgetJS.isFormValid(#myform)”<\/strong> para capturar e gerenciar o status de verifica\u00e7\u00e3o.<\/p>\n

Um campo adicional \u00e9“Allow to submit form with errors” (Permitir o envio de formul\u00e1rio com erros<\/strong>). Aqui podemos definir quantas vezes o usu\u00e1rio pode enviar dados inv\u00e1lidos antes de salv\u00e1-los. Usaremos essa op\u00e7\u00e3o se estivermos interessados em salvar os dados, mesmo que eles estejam parcialmente errados.<\/p>\n

Etapa 5 – Dom\u00ednios autorizados.<\/h3>\n

Nessa op\u00e7\u00e3o, indicaremos em quais dom\u00ednios a op\u00e7\u00e3o de verificar dados pode ser usada ao verificar formul\u00e1rios. Isso adiciona uma camada extra de seguran\u00e7a, impedindo que eles usem as credenciais de verifica\u00e7\u00e3o para outros fins que n\u00e3o a verifica\u00e7\u00e3o em nosso site.<\/p>\n

\"Formul\u00e1rio<\/p>\n

Recomendamos que voc\u00ea limite o n\u00famero de solicita\u00e7\u00f5es de API<\/a>, por minuto e o total de solicita\u00e7\u00f5es como um n\u00edvel adicional de seguran\u00e7a.<\/p>\n

Etapa 6 – Conclu\u00edda.<\/h3>\n

Nesse ponto, voc\u00ea deve copiar e colar o c\u00f3digo gerado pelo assistente na p\u00e1gina em que est\u00e1 o formul\u00e1rio. Recomendamos que voc\u00ea o publique ap\u00f3s o macac\u00e3o.<\/p>\n

\"C\u00f3digo<\/p>\n

Para voc\u00eas que t\u00eam um sistema fora do padr\u00e3o, criamos uma vers\u00e3o de “compatibilidade m\u00e1xima”<\/strong>. Isso permite que voc\u00ea torne o widget de verifica\u00e7\u00e3o ainda mais compat\u00edvel. Voc\u00ea deve colocar uma parte do script dentro do cabe\u00e7alho da p\u00e1gina em que o formul\u00e1rio est\u00e1 localizado. Se voc\u00ea puder restringir esse script na p\u00e1gina em que est\u00e1 o formul\u00e1rio, mesmo que o script seja muito r\u00e1pido, ele sempre exigir\u00e1 alguns milissegundos de processamento.<\/p>\n

\"Script<\/p>\n

Para iniciar o script de verifica\u00e7\u00e3o, voc\u00ea tamb\u00e9m precisar\u00e1 adicionar o script de compatibilidade m\u00e1xima. Isso garante que as funcionalidades de verifica\u00e7\u00e3o sejam iniciadas exclusivamente na p\u00e1gina indicada. N\u00e3o fa\u00e7a com que eles sejam lan\u00e7ados em todas as p\u00e1ginas do seu site. Isso diminui desnecessariamente a velocidade de carregamento do site nas se\u00e7\u00f5es em que ele n\u00e3o \u00e9 usado, e nosso firewall pode bloquear as verifica\u00e7\u00f5es se o n\u00famero de solicita\u00e7\u00f5es for muito alto, interpretando-o como um ataque.<\/p>\n

<script>widgetJS.enableMaxCompatibility();<\/script><\/em><\/p>\n

Considera\u00e7\u00f5es sobre seguran\u00e7a<\/h3>\n

Lembre-se de que, ao usar um Widget, voc\u00ea est\u00e1 expondo o token da API. \u00c9 bom que voc\u00ea ative somente os dom\u00ednios em que deseja exibir o formul\u00e1rio (definido na se\u00e7\u00e3o “Dom\u00ednios autorizados”<\/strong> da configura\u00e7\u00e3o do Widget) e que tamb\u00e9m limite o total de solicita\u00e7\u00f5es e solicita\u00e7\u00f5es por minuto que o Widget pode processar. Defina-o como um n\u00famero que fa\u00e7a sentido para seu padr\u00e3o de uso.<\/p>\n

\"Servi\u00e7os<\/p>\n

Se precisar de ajuda com a implementa\u00e7\u00e3o do Widget para validar formul\u00e1rios, voc\u00ea pode entrar em contato conosco por meio do assistente de bate-papo que se encontra no canto inferior direito do site.<\/p>\n

Lembre-se de que voc\u00ea pode avaliar gratuitamente o servi\u00e7o de valida\u00e7\u00e3o de e-mails<\/a> ao se registrar em nosso portal.<\/p>\n","protected":false},"excerpt":{"rendered":"

Na Verificaremails, desenvolvemos um widget para validar formul\u00e1rios que permite verificar em tempo real os dados que voc\u00ea captura por meio de formul\u00e1rios da Web. Usando nosso assistente, voc\u00ea pode implementar servi\u00e7os de verifica\u00e7\u00e3o em qualquer formul\u00e1rio da Web para verificar e-mails, validar n\u00fameros de telefone, endere\u00e7os postais, nomes e sobrenomes. Onde devo criar o … Ler mais<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"kbtopic":[],"kbtag":[1107],"class_list":["post-8737","kb","type-kb","status-publish","hentry","kbtag-widget-pt-br"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/kb\/8737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/kb"}],"about":[{"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/types\/kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/comments?post=8737"}],"version-history":[{"count":0,"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/kb\/8737\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/media?parent=8737"}],"wp:term":[{"taxonomy":"kbtopic","embeddable":true,"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/kbtopic?post=8737"},{"taxonomy":"kbtag","embeddable":true,"href":"https:\/\/www.verificaremails.com\/pt-br\/wp-json\/wp\/v2\/kbtag?post=8737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}