logo

Gerenciar eventos no widget

O widget é um mecanismo que permite que você implemente facilmente serviços de verificação em seus formulários da Web de coleta de dados. Com o assistente, você pode decidir quais serviços de verificação deseja implementar, em quais campos deseja que eles sejam usados e seu comportamento. Por exemplo, você pode configurar para que o formulário não permita o envio de dados se um campo contiver um endereço de e-mail incorreto, um número de telefone ou um erro em um endereço postal. Outra opção poderia ser marcar em vermelho o campo errado, mas permitir que você envie os dados…

Embora o widget permita uma ampla variedade de configurações, há também a possibilidade de gerenciá-las por meio de código para que os programadores tenham controle total sobre como reagir aos eventos de verificação. Para fazer isso, você deve desativar a opção “Gerenciar envio de formulário” na “Etapa 4”.

Você tem três opções:

  • Javascript padrão com tratamento assíncrono
  • Javascript padrão sem tratamento assíncrono
  • JQuery com gerenciamento assíncrono
  • JQuery com gerenciamento não assíncrono
Gestionar eventos con el Widget

Validação de formulário com JavaScript e gerenciamento assíncrono

				
					<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Ejemplo</title>    
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1739336791" type="text/javascript" data-rocket-defer defer></script>
    <script>widgetJS.init('********TOKEN********');</script>
    
    <script>
        // Ejemplo usando JavaScript estándar
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('myform');

            form.addEventListener('submit', async function (event) {
                event.preventDefault(); // Prevenir el envío del formulario

                // Validar el formulario
                const isFormValid = await widgetJS.isFormValid('#myform');

                if (isFormValid) {
                    // Si el formulario es válido, enviar el formulario y/o realizar otras operaciones.
                    form.submit();
                } else {
                    // Si el formulario no es válido, mostrar un mensaje de error o realizar cualquier otra operación deseada. 
		    // Los estilos CSS/style definidos en el widget también se aplicarán.
                    alert('El formulario no es válido. Por favor, revisa los campos.');
                }

		// Aquí podría haber más código
            });
        });
    </script>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle"></style>
</noscript>
<script type="application/javascript">const rocket_pairs = []; const rocket_excluded_pairs = [];</script></head>
<body>
    <form id="myform" class="profile-form">
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Enviar</button>
    </form>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach((t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}}))}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find((t=>e[t]))];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout((()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)}),i);window.addEventListener("rocket-startLoading",(function(){clearTimeout(o)}))}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach((t=>{e.forEach((e=>{i.push(t+e)}))})),i}l(t,e){this.i().forEach((t=>delete e[t])),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script></body>
</html>
				
			

Validação de formulário com JavaScript sem tratamento assíncrono

				
					<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Ejemplo</title>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1739336791" data-rocket-defer defer></script>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1739336791" type="text/javascript" data-rocket-defer defer></script>
    <script>widgetJS.init('********TOKEN********');</script>
    <script>
        // Ejemplo usando JavaScript estándar
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('myform');

            form.addEventListener('submit', function(event) {
                event.preventDefault(); // Prevenir el envío del formulario

                // Validar el formulario
                widgetJS.isFormValid('#myform').then(isFormValid => {
                    if (isFormValid) {
                        // Si el formulario es válido, enviar el formulario
                        form.submit();
                    } else {
                        // Si el formulario no es válido, mostrar un mensaje de error o realizar cualquier otra operación deseada
                        alert('El formulario no es válido. Por favor, revisa los campos.');

                        // Aquí podría haber más código
                    }
                }).catch(error => {
                    console.error('Error al validar el formulario:', error);
                    alert('Ocurrió un error al validar el formulario.');
                });
            });
        });
    </script>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle"></style>
</noscript>
<script type="application/javascript">const rocket_pairs = []; const rocket_excluded_pairs = [];</script></head>
<body>
    <form id="myform" class="profile-form">
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Enviar</button>
    </form>
</body>
</html>
				
			

Validação de formulário com JQuery com tratamento assíncrono

				
					
<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Ejemplo</title>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1739336791" data-rocket-defer defer></script>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1739336791" type="text/javascript" data-rocket-defer defer></script>
    <script>widgetJS.init('********TOKEN********');</script>
    <script>window.addEventListener('DOMContentLoaded', function() {
        $(document).ready(function () {
            $('#myform').on('submit', async function (event) {
                event.preventDefault(); // Prevenir el envío del formulario

                // Validar el formulario
                const isFormValid = await widgetJS.isFormValid('#myform');

                if (isFormValid) {
                    // Si el formulario es válido, enviar el formulario y/o realizar otras operaciones.
                    this.submit();
                } else {
                    // Si el formulario no es válido, mostrar un mensaje de error o realizar cualquier otra operación deseada
		    // Los estilos CSS/style definidos en el widget también se aplicarán.
                    alert('El formulario no es válido. Por favor, revisa los campos.');
                }

		// Aquí podría haber más código
            });
        });
    });</script>    
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle"></style>
</noscript>
<script type="application/javascript">const rocket_pairs = []; const rocket_excluded_pairs = [];</script></head>
<body>
    <form id="myform" class="profile-form">
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

				
			

Validação de formulário com JQuery sem tratamento assíncrono

				
					
<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Ejemplo</title>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1739336791" data-rocket-defer defer></script>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1739336791" type="text/javascript" data-rocket-defer defer></script>
    <script>widgetJS.init('********TOKEN********');</script>
    <script>window.addEventListener('DOMContentLoaded', function() {
        // Ejemplo usando jQuery
        $(document).ready(function() {
            $('#myform').on('submit', function(event) {
                event.preventDefault(); // Prevenir el envío del formulario

                // Validar el formulario
                widgetJS.isFormValid('#myform').then(isFormValid => {
                    if (isFormValid) {
                        // Si el formulario es válido, enviar el formulario
                        event.target.submit();
                    } else {
                        // Si el formulario no es válido, mostrar un mensaje de error o realizar cualquier otra operación deseada
                        alert('El formulario no es válido. Por favor, revisa los campos.');


                        // Aquí podría haber más código
                    }
                }).catch(error => {
                    console.error('Error al validar el formulario:', error);
                    alert('Ocurrió un error al validar el formulario.');
                });
            });
        });
    });</script>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle"></style>
</noscript>
<script type="application/javascript">const rocket_pairs = []; const rocket_excluded_pairs = [];</script></head>
<body>
    <form id="myform" class="profile-form">
        <label for="name">Nombre:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

				
			

Resultados da verificação no widget

Para visualizar o status das verificações, devemos ir para a seção “APIS” e selecionar a API que usamos no widget. Ao ajustar o intervalo de tempo, você pode ver um gráfico com o status das diferentes verificações ao longo do tempo.

Se o widget verificar mais de um tipo de dados, você deverá abrir cada uma das APIs usadas:

API Check Mail

Podemos acessar as verificações de cada um dos registros selecionando o ícone de “olho” na seção “APIS CONECTADOS”.

Você precisa de ajuda com suas verificações? Não se preocupe

Somos o seu parceiro de confiança para a validação dos seus dados.
Entre em contato ou ligue para +34 93 451 11 00

- MELHORE A QUALIDADE DE SEUS DADOS DE MANEIRA SIMPLES - VOCÊ PODE USAR O SOFTWARE PARA MELHORAR A QUALIDADE DE SEUS DADOS.

vERIFICAR E-MAILS
TELEFONES,
ENDEREÇOS POSTAIS
NOMES E SOBRENOMES...