logo Verificaremails

Gestionar Eventos en el Widget

El widget es un mecanismo que permite implementar los servicios de verificación de forma sencilla en los formularios Web de captación de datos. Con el asistente puede decidir que servicios de verificación deseas implementar, en que campos quieres que se utilicen y su comportamiento. Por ejemplo, podrías configurar que el formulario no deje enviar los datos si algún campo contienen un mails incorrecto, un teléfono o hay un error en una dirección postal. Otra opción podría ser marcar en rojo el campo erróneo pero dejar enviar los datos…

Aunque el widget permite una gran variedad de configuraciones también existe la posibilidad de gestionarlos vía código para que los programadores tengan un control total sobre como reaccionar a los eventos de verificación. Para ello debes deshabilitar en el “Paso 4” la opción “Gestionar envío de formulario”.

Dispones de 3 opciones:

  • Javascript estándar con gestión asíncrona
  • Javascript estándar sin gestión asíncrona
  • JQuery con gestión asíncrona
  • JQuery con gestión sin asíncrona
Gestionar eventos con el Widget

Validación de formularios con JavaScript y gestión asíncron

				
					<!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>
				
			

Validación de formularios con JavaScript sin gestión asíncrona

				
					<!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>
				
			

Validación de formularios con JQuery con gestión asíncrona

				
					
<!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>

				
			

Validación de formularios con JQuery sin gestión asíncrona

				
					
<!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 de la verificación en widget

Para visualizar el estado de las verificaciones debemos ir a la sección “APIS” y seleccionar el API que hemos utilizado en el widget. Ajustando el rango temporal podemos ver un gráfico con el estado de las distintas verificaciones a lo largo del tiempo.

Si el widget verifica más de un tipo de datos deberemos abrir cada una de las APIs utilizadas:

API Comprobar Correo

Podemos tener acceso a las verificaciones de cada uno de los registros si seleccionamos el icono con forma de “ojo” en la sección “APIS CONECTADAS”.

 

¿Necesitas ayuda con tus verificaciones? No te preocupes

Somos tu partner de confianza para la validación de tus datos.
Contactar o llama al +34 93 451 11 00

Logo VerificareEmails
Cerrar menú de navegación

— MEJORA LA CALIDAD DE TUS DATOS DE FORMA SIMPLE —

vERIFICA EMAILS
TELÉFONOS,
DIRECCIONES POSTALES
NOMBRES Y aPELLIDOS...