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 :-)
Nessun commento:
Posta un commento