Logo
Logo

Ereignisse im Widget verwalten

Das Widget ist ein Mechanismus, mit dem Sie ganz einfach Überprüfungsdienste in Ihre Webformulare zur Datenerfassung implementieren können. Mit dem Assistenten können Sie entscheiden, welche Überprüfungsdienste Sie implementieren möchten, in welchen Feldern sie verwendet werden sollen und wie sie sich verhalten. Sie können das Formular zum Beispiel so konfigurieren, dass Sie keine Daten übermitteln können, wenn ein Feld eine falsche E-Mail-Adresse, eine Telefonnummer oder einen Fehler in einer Postanschrift enthält. Eine andere Option könnte sein, das falsche Feld rot zu markieren, Sie aber die Daten senden zu lassen…

Obwohl das Widget eine Vielzahl von Konfigurationen zulässt, gibt es auch die Möglichkeit, diese über Code zu verwalten, so dass Programmierer die volle Kontrolle darüber haben, wie sie auf Verifizierungsereignisse reagieren. Dazu müssen Sie die Option “Formularübermittlung verwalten” in “Schritt 4” deaktivieren.

Sie haben 3 Möglichkeiten:

  • Standard-Javascript mit asynchroner Verarbeitung
  • Standard-Javascript ohne asynchrone Verarbeitung
  • JQuery mit asynchroner Verwaltung
  • JQuery mit nicht asynchroner Verwaltung
Gestionar eventos con el Widget

Formularvalidierung mit JavaScript und asynchroner Verwaltung

				
					<!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=1741705720" 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>
				
			

Formularvalidierung mit JavaScript ohne asynchrone Verarbeitung

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

Formularvalidierung mit JQuery mit asynchroner Verarbeitung

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

				
			

Formularvalidierung mit JQuery ohne asynchrone Verarbeitung

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

				
			

Ergebnisse der Überprüfung im Widget

Um den Status der Überprüfungen anzuzeigen, müssen wir zum Abschnitt “APIS” gehen und die API auswählen, die wir im Widget verwendet haben. Wenn Sie die Zeitspanne anpassen, können Sie ein Diagramm mit dem Status der verschiedenen Überprüfungen im Laufe der Zeit sehen.

Wenn das Widget mehr als eine Art von Daten prüft, müssen wir jede der verwendeten APIs öffnen:

API Check Mail

Wir können auf die Überprüfungen der einzelnen Datensätze zugreifen, indem wir das Symbol “Auge” im Bereich “VERBUNDENE APIS” auswählen.

Benötigen Sie Hilfe bei Ihren Verifizierungen? Machen Sie sich keine Sorgen

Wir sind Ihr zuverlässiger Partner für die Validierung Ihrer Daten.
Kontakt oder anrufen +34 93 451 11 00

- VERBESSERN SIE DIE QUALITÄT IHRER DATEN AUF EINFACHE WEISE -




vERIFY EMAILS TELEPHONES, POSTADRESSEN NAMEN UND NACHNAMEN...