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…

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

You have 3 options:

Standard Javascript with asynchronous management
Standard Javascript without asynchronous management
JQuery with asynchronous management
JQuery with non-asynchronous management

JavaScript form validation and asynchronous form management

				
					<!DOCTYPE html>
<html>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1756990285" 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>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1756990285" data-rocket-defer defer></script>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1756990285" 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>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1756990285" data-rocket-defer defer></script>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1756990285" 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>
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1756990285" data-rocket-defer defer></script>
    <script data-minify="1" src="https://www.verificaremails.com/wp-content/cache/min/1/widgetjs/widgetjs.js?ver=1756990285" 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