{"id":8736,"date":"2024-05-09T12:46:31","date_gmt":"2024-05-09T11:46:31","guid":{"rendered":"https:\/\/www.verificaremails.com\/kb\/come-utilizzare-il-widget-per-convalidare-i-moduli\/"},"modified":"2025-02-05T15:49:21","modified_gmt":"2025-02-05T14:49:21","slug":"come-utilizzare-il-widget-per-convalidare-i-moduli","status":"publish","type":"kb","link":"https:\/\/www.verificaremails.com\/it\/kb\/come-utilizzare-il-widget-per-convalidare-i-moduli\/","title":{"rendered":"Come utilizzare il widget per convalidare i moduli"},"content":{"rendered":"

Noi di Verificaremails abbiamo sviluppato un widget per la convalida dei moduli che ti permette di verificare in tempo reale i dati che acquisisci attraverso i moduli web. Utilizzando la nostra procedura guidata puoi implementare servizi di verifica su qualsiasi modulo web per verificare email, numeri di telefono, indirizzi postali, nomi e cognomi.<\/p>\n

Dove devo creare il widget per convalidare i moduli?<\/h2>\n

Per implementare il widget in qualsiasi forma, devi accedere al nostro portale e selezionare nel menu a sinistra la sezione“WidgetJS<\/a>“.<\/p>\n

Verr\u00e0 visualizzata una vista con i widget attivi e potrai crearne di nuovi utilizzando il pulsante in alto “+Crea nuovo widget”.<\/p>\n

Per utilizzare il widget devi disporre di un’API del servizio che vuoi utilizzare. Ricorda che puoi utilizzare contemporaneamente diversi servizi di verifica per convalidare insieme: nomi, email, numeri di telefono…<\/p>\n

Configurazione del widget di verifica del modulo<\/h2>\n

Prima di iniziare, ti consigliamo di guardare il video sul funzionamento del servizio. L’implementazione del Widget non \u00e8 complessa, ma richiede un minimo di conoscenze tecniche. L’utilizzo di un widget per la verifica permette di ridurre l’implementazione del servizio di verifica in un modulo da giorni\/ore a minuti.<\/p>\n

\"Moduli<\/p>\n

Passo 1 – Introduzione<\/h3>\n

Per prima cosa, dovrai inserire un nome per identificare il Widget. Usa un nome che ti permetta di identificare a quali moduli applicare la verifica del campo. Ricorda che puoi controllare pi\u00f9 di un campo nello stesso modulo.<\/p>\n

Passo 2 – Selezionare i servizi<\/h3>\n

Se hai creato in precedenza le API per i campi che vuoi verificare, saranno elencate sotto ogni servizio. Se non le hai ancora create, vai alla sezione API<\/a> nel menu di navigazione a sinistra.<\/p>\n

\"Selezione<\/p>\n

Passo 3 – Configurare i servizi<\/h3>\n

Per ogni servizio dovrai scegliere se convalidare solo i campi con esito “OK” o se accettare anche quelli dubbi. Ad esempio, nel caso della verifica dell’indirizzo di posta elettronica. Potresti avere delle e-mail che superano la convalida. In questo caso sar\u00e0 contrassegnata come “OK”, ma possiamo anche avere mail dubbie come quelle che restituiscono “ok_for_all” o “accept_all”. Abbiamo raggruppato questo tipo di posta nella categoria “inconcludente”.<\/p>\n

\"Seleziona<\/p>\n

Devi decidere se consentire agli utenti di registrare questo tipo di email. Questo non significa che l’indirizzo e-mail non sia valido. Semplicemente, non possiamo verificarlo in modo affidabile. Lo stesso vale per gli altri campi: numeri di telefono, indirizzi postali, nomi…<\/p>\n

Nella sezione “Selettori DOM degli elementi”<\/strong> identifichiamo l’elemento DOM che contiene il campo da validare, nel nostro caso la mail. Ci sono diversi modi per definire questo campo.<\/p>\n

Nel nostro esempio, se abbiamo un modulo che ha un id=”frmSS134″<\/strong> e il valore contenente il campo email \u00e8 chiamato name=”email”<\/strong>.<\/p>\n

Ex:
\n<form method=”post” action=”https:\/\/www.marketingdeexperiencias.com\/iris\/form.php?form=134″ id=”frmSS134″ onsubmit=”return CheckForm134(this);”><\/em>
\n<table border=”0″ cellpadding=”2″ cellpadding=”2″ table border=”0″ cellpadding=”2″ cellpadding=”1><\/em>
\n<tr><\/em>
\n<td><span>*<\/span> <\/em>
\nIl tuo indirizzo e-mail:<\/td><\/em>
\n<td><input type=”text” name=”email” value=”” \/><\/td><\/em><\/p>\n

Nel campo “selettori DOM degli elementi”, dobbiamo inserire
\n# frmSS134 [name=\u2019email\u2019]<\/strong><\/p>\n

\"Widget<\/p>\n

Se non sai come identificarlo, il modo pi\u00f9 semplice \u00e8 inserire “id” nel campo HTML che contiene il campo da validare. Devi indicare questo campo come #nome_campo.<\/p>\n

Ad esempio, se abbiamo un campo “email” definito come:<\/p>\n

<input type=”text” id=field_name name=”email” value=”” \/><\/em><\/p>\n

In questo caso, dobbiamo inserire nel campo “selettori DOM degli elementi”<\/strong>.
\n# nome_campo<\/strong> (il nome deve iniziare con una lettera)<\/p>\n

\"Campo<\/p>\n

Al posto di “ID”, possiamo anche utilizzare le classi per identificare i campi:
\n.my_form .my_field<\/strong><\/p>\n

Un’altra combinazione \u00e8 quella di utilizzare l’identificatore del modulo con il nome del campo, ottenendo cos\u00ec:
\n#mi_formulario . [name=\u2019nombre_del_campo\u2019]<\/strong><\/p>\n

Se tutto questo \u00e8 troppo complicato, passa queste informazioni al tuo sviluppatore che le integrer\u00e0 perfettamente. Per chi \u00e8 abituato a lavorare con i CSS non dovrebbe essere complicato.<\/p>\n

L’utilizzo del Widget invece di uno sviluppo personalizzato ti permette di implementare la funzionalit\u00e0 di verifica dei moduli in pochi minuti, invece di dover impiegare ore di lavoro per implementare il tuo servizio di verifica.<\/p>\n

Passo 4 – Configurazione degli errori<\/h3>\n

In questa sezione configureremo la visualizzazione dei messaggi di errore. Possiamo modificare gli stili di visualizzazione dei campi che presentano errori attraverso il campo “Tipo di errore”<\/strong>. In questo caso dobbiamo decidere se utilizzare “Stili”<\/strong> o “Classi”<\/strong> per indicare che c’\u00e8 un errore nel modulo.<\/p>\n

\"Selezione<\/p>\n

Nel nostro caso abbiamo selezionato “Stili”. Questo ci permette di indicare direttamente gli stili nella procedura guidata. Per evitare che il processo di convalida influisca sulla velocit\u00e0 di registrazione del modulo, abbiamo fatto in modo che il controllo del campo venga attivato nell’evento “change focus”.<\/p>\n

Nel nostro caso, il modulo mostrer\u00e0 una linea rossa nel campo che fallisce quando l’utente cambia il focus dal campo “email” a un altro elemento.<\/p>\n

In questa stessa sezione abbiamo altre due opzioni. La funzione “Gestisci l’invio dei moduli”<\/strong> ti permette di bloccare l’invio dei dati fino a quando non sono non validi. Ricorda che possiamo definire i dati validi per ogni servizio nell’opzione “Configura servizi”<\/strong>. Se disabilitiamo l’opzione “Gestisci l’invio del modulo”<\/strong>, lo sviluppatore pu\u00f2 utilizzare le funzioni “await widgetJS.isFormValid(#myform)”<\/strong> per acquisire e gestire lo stato di verifica.<\/p>\n

Un campo aggiuntivo \u00e8“Consenti l’invio del modulo con errori”<\/strong>. Qui possiamo definire quante volte l’utente pu\u00f2 inviare dati non validi prima di salvarli. Utilizzeremo questa opzione se siamo interessati a salvare i dati, anche se sono parzialmente errati.<\/p>\n

Fase 5 – Domini autorizzati.<\/h3>\n

In questa opzione indicheremo in quali domini \u00e8 possibile utilizzare l’opzione di verifica dei dati quando si verificano i moduli. Questo aggiunge un ulteriore livello di sicurezza, impedendo loro di utilizzare le credenziali di verifica per scopi diversi dalla verifica sul nostro sito web.<\/p>\n

\"Modulo<\/p>\n

Ti consigliamo di limitare il numero di richieste API<\/a>, al minuto e in totale, come ulteriore livello di sicurezza.<\/p>\n

Passo 6 – Completato.<\/h3>\n

A questo punto dobbiamo copiare e incollare il codice generato dalla procedura guidata nella pagina in cui abbiamo il nostro modulo. Ti consigliamo di pubblicarlo dopo la tutina.<\/p>\n

\"Codice<\/p>\n

Per coloro che hanno un sistema non standard, abbiamo creato una versione di “massima compatibilit\u00e0”<\/strong>. Questo permette di rendere il widget di verifica ancora pi\u00f9 compatibile. Devi inserire una parte dello script all’interno dell’intestazione della pagina in cui \u00e8 inserito il modulo. Se puoi limitare questo script nella pagina in cui hai il modulo, anche se lo script \u00e8 molto veloce, richieder\u00e0 sempre qualche millisecondo di elaborazione.<\/p>\n

\"Script<\/p>\n

Per lanciare lo script di verifica dovrai aggiungere anche lo script di massima compatibilit\u00e0. In questo modo si garantisce che le funzionalit\u00e0 di verifica vengano avviate esclusivamente nella pagina indicata. Non farli lanciare su ogni pagina del tuo sito web. Questo rallenta inutilmente la velocit\u00e0 di caricamento del sito web nelle sezioni in cui non viene utilizzato e il nostro firewall potrebbe bloccare i controlli se il numero di richieste \u00e8 troppo elevato, interpretandolo come un attacco.<\/p>\n

<script>widgetJS.enableMaxCompatibility();<\/script><\/em><\/p>\n

Considerazioni sulla sicurezza<\/h3>\n

Ricorda che quando usi un Widget stai esponendo il token API. \u00c8 bene che tu abiliti solo i domini in cui vuoi visualizzare il modulo (definiti nella sezione “Domini autorizzati”<\/strong> della configurazione del Widget) e che limiti anche le richieste totali e le richieste al minuto che il Widget pu\u00f2 elaborare. Impostalo su un numero che abbia senso per il tuo modello di utilizzo.<\/p>\n

\"Servizi<\/p>\n

Se hai bisogno di aiuto per l’implementazione del Widget per la convalida dei moduli, puoi contattarci attraverso l’assistente di chat che trovi in basso a destra sul sito.<\/p>\n

Ricorda che puoi valutare gratuitamente il servizio di convalida delle email<\/a> quando ti registri al nostro portale.<\/p>\n","protected":false},"excerpt":{"rendered":"

Noi di Verificaremails abbiamo sviluppato un widget per la convalida dei moduli che ti permette di verificare in tempo reale i dati che acquisisci attraverso i moduli web. Utilizzando la nostra procedura guidata puoi implementare servizi di verifica su qualsiasi modulo web per verificare email, numeri di telefono, indirizzi postali, nomi e cognomi. Dove devo … Per saperne di pi\u00f9<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"kbtopic":[],"kbtag":[1106],"class_list":["post-8736","kb","type-kb","status-publish","hentry","kbtag-widget-it"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/kb\/8736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/kb"}],"about":[{"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/types\/kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/comments?post=8736"}],"version-history":[{"count":0,"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/kb\/8736\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/media?parent=8736"}],"wp:term":[{"taxonomy":"kbtopic","embeddable":true,"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/kbtopic?post=8736"},{"taxonomy":"kbtag","embeddable":true,"href":"https:\/\/www.verificaremails.com\/it\/wp-json\/wp\/v2\/kbtag?post=8736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}