Disclaimer per i contenuti del Blog


DISCLAIMER:Questo blog non rappresenta una testata giornalistica in quanto viene aggiornato senza alcuna periodicità . Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n° 62 del 7.03.2001.
L'autore non è responsabile per quanto pubblicato dai lettori nei commenti ad ogni post. Verranno cancellati i commenti ritenuti offensivi o lesivi dell’immagine o dell’onorabilità di terzi, di genere spam, razzisti o che contengano dati personali non conformi al rispetto delle norme sulla Privacy. Alcuni testi o immagini inserite in questo blog sono tratte da internet e, pertanto, considerate di pubblico dominio; qualora la loro pubblicazione violasse eventuali diritti d'autore, vogliate comunicarlo via email. Saranno immediatamente rimossi. L'autore del blog non è responsabile dei siti collegati tramite link, del loro contenuto che può essere soggetto a variazioni nel tempo ne degli eventuali danni derivanti dall'utilizzo proprio od improprio delle informazioni presenti nei post.

domenica 8 ottobre 2017

validateForm: una classe Javascript per la convalida dei form


Una delle operazioni più noiose quando si realizzano front-end HTML è la verifica della validità dei dati inseriti dall'utente.

Normalmente è il modulo attivato dal submit del <FORM></FORM> a farsi carico di tutti i controlli e a decidere se i dati sono accettabili o se si renda necessario l'intervento dell'utente per la loro correzione.

Intendiamoci, non mi sono inventato nulla di talmente innovativo da evitare tutta questa serie di noiose operazioni ma sicuramente le rendo più agevoli ed "eleganti".

Il modulo principale è uno script JS che si appoggia a jQuery (testato dalla v2.1 in poi, probabilmente funzionante anche con versioni precedenti) e che comunica con un modulo PHP di controllo via AJAX così da ridurre il più possibile i reload del form in caso di errori; questo modulo JS si fa carico delle verifiche più semplici e di delegare quelle più complesse a quello PHP.

Attualmente il modulo PHP supporta la verifica del Codice Fiscale, della partita IVA (solo italiana per ora) del codice IBAN (solo italiano per ora), della correttezza di una URL, della validità ed esistenza di una URL; eventuali routines di controllo aggiuntive possono essere implementate molto semplicemente.

Se la pagina HTML dovesse contenere più <FORM></FORM>, è possibile attivare una istanza di  validateForm per ogni blocco ricordando ovviamente di attribuire un id diverso ad ogni form.

L'implementazione è molto semplice e si riduce al caricamento del modulo validateForm.js e validateForm.css (e di jQuery se non già presente), all'aggiunta di una porzione di codice nella sezione <SCRIPT></SCRIPT> e nella specifica di quali controlli effettuare per ogni tag <INPUT> o <SELECT> aggiungendo l'attributo (personalizzabile, se necessario) data-validation="[tipo_di_verifica]".

Vediamo quali tipi di verifiche sono attualmente implementate, la colonna data-validation contiene il valore da inserire nell'omonimo attributo e facendo seguire tale valore dal suffisso -required si ottiene, oltre alla verifica descritta, anche la necessità di valorizzazione del campo (es. number-required):

data-validation Tipo di verifica
skip Nessun controllo di validità
required Richiesta valorizzazione dell'input
number Accettati solo caratteri numerici
email Indirizzo email formalmente valido
date Data valida in formato GG/MM/AAAA
equal-next Valore uguale a quello del campo successivo
equal-prev Valore uguale a quello del campo precedente
cf Codice Fiscale formalmente corretto
iban IBAN (italiano) formalmente valido
piva Partita IVA (italiana) formalmente valida
url URL formalmente valida
urlexists URL formalmente valida ed esistente

Una nota particolare spetta a equal-next e equal-prev: li ho implementati per verificare la doppia digitazione di password in due campi distinti in fase di cambio o creazione. Anche in questo caso il suffisso -required rende obbligatoria la digitazione del dato.

Iniziamo ad analizzare il codice. La prima cosa da fare è includere jQuery ed i moduli JS e CSS di validateForm inserendo queste righe tra i tag <HEAD></HEAD>:

    <!-- jQuery -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- validateForm -->
    <script src="js/validateForm.min.js"></script>
    <link href="css/validateForm.css" rel="stylesheet">

ATTENZIONE: posizionare il caricamento di validateForm.css come ultimo per evitare modifiche indesiderate da eventuali altri CSS presenti!!

La seconda è l'inclusione trai i tag <SCRIPT></SCRIPT> del seguente codice di inizializzazione del modulo:

        $(document).ready(function() {
            //-- Inizializzazione modulo di validazione form
            $("#testform").validateForm({
                attr: "data-validation",
                phpAjax: "ajax/validateForm.php",
                skipCheck: function() {
                    return false;
                },
                dispError: function() {
                    alert("Riscontrati errori nel form - verificare i campi evidenziati in ROSSO");
                    return true;
                },
                submitForm: function() {
                    $.ajax({
                        cache: false,
                        async: true,
                        type: "POST",
                        url: "ajax/submitform.php",
                        dataType: "JSON",
                        data: $("#testform").serialize(),
                        success: function(response) {
                            if (response.theRc == 0) {
                                $("#result-data").html(response.theData);
                            } else {
                                alert(response.theMsg);
                            }
                        },
                        error: function(data, errorThrown) {
                            alert("Si è verificato un errore AJAX: " + data.responseText);
                        }
                    });
                }
            });
        });
Affinché l'inizializzazione si completi correttamente è necessario:

  • sostituire #testform con l'id del form da convalidare
  • verificare che il nome dell'attributo "data-validation" sia non utilizzato per altri scopi e semmai modificarlo
  • verificare che lo script associato alla proprietà phpAjax (quello che esegue i controlli lato host) sia corretto
  • personalizzare, se necessario, la routine di visualizzazione errore (ora è un semplice alert())
  • personalizzare le due funzioni success() ed error() presenti all'interno della funzione submitForm()
  • personalizzare l'url legata alla proprietà url della funzione submitForm() (in pratica è il modulo PHP che verrà eseguito all'atto del submit del form)

La terza ed ultima fase consiste nell'individuare i campi che dovranno essere sottoposti a verifica e completarli aggiungendo l'attributo data-validation (o altro definito in fase di inizializzazione del modulo) con il tipo di controllo richiesto ed un id (io per abitudine imposto ID e NAME con lo stesso valore ma non è obbligatorio ovviamente):

    <label for="cf">Codice fiscale</label>
    <input id="cf" name="cf" type="text" data-validation="cf-required">

A questo punto il lavoro è terminato e possiamo verificare il funzionamento del tutto. Una demo è disponibile su https://www.paolobertinetti.it/esempi/validateform/ ed il relativo codice sorgente può essere scaricato da https://www.paolobertinetti.it/esempi/validateform/validateform.zip.

In caso di dubbi, curiosità, consigli o semplicemente per farmi notare eventuali sviste, lasciate pure un commento qui sotto.

Se avete trovato utile questo modulo e vi fosse passato per la testa di fare una micro-donazione con PayPal sappiate che NON mi riterrò offeso :-)