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 :-)


11 commenti:

  1. Ciao scusa se ti disturbo, sto usando il tuo esempio ma non riesco a inviare dal form alla pagina di inserimento db, funziona perfettamente ma mi fa solovedere al fondo i dati validati
    puoi dirmi come fare grazie

    RispondiElimina
    Risposte
    1. Ciao, i dati della pagina vengono inviati via Ajax ad un modulo PHP. Nell'esempio sopra questo modulo si chiama ajax/submitform.php
      Non riesco a capire bene quale sia il tuo problema ma se vuoi pubblica un esempio e vedremo di risolverlo.

      Elimina
    2. Comunque è sufficiente che tu sostituisca ajax/submitform.php con il nome del modulo che hai preparato per eseguire l'aggiornamento. Dentro il modulo preleverai il contenuto dei campi utilizzando una serie di $val1 = $_POST["nomecampo"] e poi farai quello che serve per aprire il database ed eseguire la SQL di INSERT o UPDATE. Nell'esempio ho semplicemente visualizzato i dati ricevuti in quanto ognuno avrà esigenze diverse da soddisfare...

      Elimina
  2. Buon giorno
    come prima cosa grazie per la risposta, ma.........
    Essendo una capra, ti chiedo come fare ad avere i dati dopo il controllo in una pagina di nome leggo.php dove all'interno fare delle echo delle varie $_POST["nomecampo"]. in pratica esce da form.php dopo aver controllato i dati e va a leggo.php e fa gli echo dei contenuti.
    Grazie ancora

    RispondiElimina
    Risposte
    1. Questa classe è valida se sai utilizzare le chiamate Ajax e strutturi di conseguenza la tua applicazione. Quello che vuoi fare tu conviene farlo con tecniche più tradizionali altrimenti rischi di complicarti esageratamente la vita. L'esempio in formato .zip scaricabile è più che esaustivo della filosofia di funzionamento. Se vuoi puoi sostituire la print_r in submitform.php (il tuo leggo.php) con una serie di "campo1=".$_POST["campo1"]." campo2=".$_POST["campo2"]." campo3=".$_POST["campo3"] ecc..

      Elimina
  3. grazie ancora
    un ultima domanda, ma dal tuo esempio se io volessi che quando clicco su INVIA ,dopo il controllo dei campi andasse in leggo.php e con il solito modo $_POST["nome"] leggessi il contenuto, è complicato da fare? perchè ho provato di tutto ma......... non riesco
    grazie

    RispondiElimina
    Risposte
    1. Puoi provare a sostituire
      $("#result-data").html(response.theData);
      con
      $("#idform").submit();

      Affinché funzioni devi completare il tag della tua "[form]" specificando un "id" ed una "action":
      [form id="idform" action="leggo.php"]

      (sostituisci [ con < e ] con > perchè blogger non mi permette di pubblicarli...)

      Non l'ho provato ma dovrebbe funzionare

      Elimina
  4. Convalida i dati ma non apre la pagina leggo.php, rimane li impassibile e non fà nulla mi dispiace romperti ma non va.

    RispondiElimina
  5. questo è quello che metto in leggo.php

    $nome= strtoupper($_POST['nome']);
    $cognome = strtoupper($_POST['cognome']);
    $indirizzo = strtoupper($_POST['indirizzo']);
    $citta = strtoupper($_POST['citta']);
    $cap = strtoupper($_POST['cap']);
    $provincia = strtoupper($_POST['provincia']);
    $cod_fisc = strtoupper($_POST['cod_fisc']);
    $email = strtoupper($_POST['email']);
    $telefono = strtoupper($_POST['telefono']);

    con i relativi echo
    Ma come ho detto non si apre la pagina leggo.php rimane il form

    RispondiElimina
  6. Ho provato, il sistema funziona ma c'è da aggiungere una riga prima di $("#idform").submit(); altrimenti l'handle del submit entra in loop. La riga da aggiungere PRIMA è $("#idform").off('submit'); che esegue il detach del gestore dell'evento 'submit' prima di eseguire il .submit().
    Ricordati di aggiungere sul tag del FORM anche method="post" altrimenti i dati te li invia in $_GET

    RispondiElimina
  7. Ok adesso ci va ma solo dopo il secondo invia

    RispondiElimina