Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Italia.
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 |
| 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 :-)
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
RispondiEliminapuoi dirmi come fare grazie
Ciao, i dati della pagina vengono inviati via Ajax ad un modulo PHP. Nell'esempio sopra questo modulo si chiama ajax/submitform.php
EliminaNon riesco a capire bene quale sia il tuo problema ma se vuoi pubblica un esempio e vedremo di risolverlo.
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...
EliminaBuon giorno
RispondiEliminacome 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
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..
Eliminagrazie ancora
RispondiEliminaun 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
Puoi provare a sostituire
Elimina$("#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
Convalida i dati ma non apre la pagina leggo.php, rimane li impassibile e non fà nulla mi dispiace romperti ma non va.
RispondiEliminaquesto è quello che metto in leggo.php
RispondiElimina$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
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().
RispondiEliminaRicordati di aggiungere sul tag del FORM anche method="post" altrimenti i dati te li invia in $_GET
Ok adesso ci va ma solo dopo il secondo invia
RispondiElimina