logo

Manage Events in the Widget

The widget is a mechanism that allows you to implement verification services in a simple way in the data collection Web forms. With the wizard you can decide which verification services you want to implement, in which fields you want them to be used and their behavior. For example, you could configure the form not to let you submit data if a field contains an incorrect email address, a phone number or an error in a postal address. Another option could be to mark in red the wrong field but let you send the data…

Although the widget allows a wide variety of configurations there is also the possibility to manage them via code so that programmers have full control over how to react to verification events. To do this you must disable the “Manage form submission” option in “Step 4”.

You have 3 options:

  • Standard Javascript with asynchronous management
  • Standard Javascript without asynchronous management
  • JQuery with asynchronous management
  • JQuery with non-asynchronous management
Gestionar eventos con el Widget

JavaScript form validation and asynchronous form management

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

Form validation with JavaScript without asynchronous handling

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

Form validation with JQuery with asynchronous management

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

				
			

Form validation with JQuery without asynchronous handling

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

				
			

Results of the verification in widget

To visualize the status of the verifications we must go to the “APIS” section and select the API we have used in the widget. By adjusting the time range we can see a graph with the status of the different verifications over time.

If the widget checks more than one type of data we must open each of the APIs used:

Email Verification API by Verificar Emails

We can access the verifications of each of the records by selecting the “eye” icon in the “CONNECTED APIS” section.

Need help with your verifications? Do not worry

We are your trusted partner for the validation of your data.
Contact or call +34 93 451 11 00

- IMPROVE THE QUALITY OF YOUR DATA IN A SIMPLE WAY -

VERIFY EMAILS
TELEPHONES,
POSTAL ADDRESSES
NAMES AND LAST NAMES...