Oggi vediamo come usare il plugin jQuery TargetValidator per la validazione dei nostri form in pochi semplici passi.
[button link=”http://www.targetweb.it/tutorial/2013/target-form-validation/” color=”blue” target=”blank” size=”large”]Demo[/button]
Installazione
Per iniziare a usare il plugin targetValidator vi basterà collegare i due file essenziali css e js nell’head del vostro progetto in questo modo:
<link href="css/target-form-validation.css" rel="stylesheet" type="text/css" /> <script src="js/target-form-validation.js"></script>
Ovviamente accertatevi di inserire sopra il file target-form-validation.js anche le librerie jQuery.
Uso e informazioni utili
Una volta installati i file principali vi basterà richiamare la validazione in questo modo:
$("#bottone-contact").click(function(){ // Click sul form
//Validation Required
//La variabile validation inserite gli ID dei campi da testare
var validation = ["nome", "email","pass", "password_check", "oggetto","messaggio","informativa"];
var buttonInvio = "#bottone-contact"; //ID del bottone di invio
window['buttonInvio'] = buttonInvio;
var timer = 2000; // Timer di scomparsa
//Eseguo la validazione
var isValid = $(document).TrgValidation(validation,buttonInvio,timer);
//Se è tutto ok invio
if (isValid == true) {
alert("Validazione OK = Invio dati all'engine di invio mail ");
} else { alert("Validazione non eseguita"); } // se non è valido non inviare
}); //fine form
Alcune precisazioni utili:
Var validation : Contiene tutti gli id degli input da testare NON indicate il cancelletto (#) per indicare gli ID in questa lista.
Var buttonInvio : è la variabile che viene assegnata al bottone di invio dati del form
Var timer: vi permette di impostare la durata sui messaggi di errore.
Var isValid: è la variabile che contiene il result della validazione, potete usarla come meglio preferite, restituisce true (validazione ok) o false (c’è qualche errore).
Parametri di validazione
Come faccio a impostare i parametri di validazione? Bhè anche in questo caso ho deciso di semplificare di molto il setting generale in questo modo:
Campi obbligatori: sono quelli impostati nella variabile validation (vedi lo script js sopraindicato)
Campo type=”email” : Esegue automaticamente una verifica di correttezza sul pattern email
Campo type=”checkbox” e type=”radio” : Esegue automaticamente una verifica sullo stato checked
Dimensione minima campi: Impostando la proprietà minlength=”X” dove X sta per il valore di caratteri MINIMI di lunghezza da compilare possiamo evitare di ricevere nomi con un carattere o richieste ancora più corte. Se impostiamo minlength=”2″ nel campo “nome” ad esempio il nome inserito per essere validato dovrà essere di almeno 2 caratteri.
Ecco un esempio di HTML (che troverete nella demo e nel download come esempio):
<form id="contact">
<p class="info_form">I campi con <span class="asterisco">(*)</span> sono obbligatori.</p>
<label for="nome">Nome <span class="asterisco">(*)</span></label>
<input type="text" name="nome" id="nome" placeholder="Il tuo nome" minlength="2" />
<label for="Email">Email <span class="asterisco">(*)</span></label>
<input type="email" name="email" id="email" placeholder="Digita la tua email" >
<label for="oggetto">Password <span class="asterisco">(*)</span></label>
<input type="password" name="pass" id="pass" placeholder="Password" >
<label for="oggetto">Riscrivi la Password <span class="asterisco">(*)</span></label>
<input type="password" name="password_check" id="password_check" placeholder="Riscrivi pass" >
<label for="oggetto">Indirizzo </label>
<input type="text" name="indirizzo" id="indirizzo" placeholder="Di che tipo di informazione hai bisogno?" >
<label for="oggetto">CAP </label>
<input type="text" name="cap" id="cap" placeholder="Di che tipo di informazione hai bisogno?" >
<label for="oggetto">Oggetto <span class="asterisco">(*)</span></label>
<input type="text" name="oggetto" id="oggetto" placeholder="Di che tipo di informazione hai bisogno?" minlength="2" >
<label for="messaggio">Richiesta <span class="asterisco">(*)</span></label>
<textarea type="textarea" cols="50" rows="10" name="messaggio" id="messaggio" placeholder="La tua richiesta" minlength="10"></textarea>
<input type="checkbox" name="informativa" id="informativa" value="informativa" checked> Accetto l'informativa sulla privacy <br />
<input type="text" id="fred" name="fred" style="display:none;">
<br />
<input class="primary button" type="button" id="bottone-contact" value="Invia Richiesta">
</form>
Collegare la validazione a un form di contatti PHP
Sicuramente i meno esperti si staranno chiedendo: ok ma ora come faccio a usare la validazione e inviare i dati al mio engine di invio email PHP? Ecco un semplice code how-to per implementare l’invio via ajax dei dati del form al vostro engine di invio dati PHP:
$(document).ready(function() {
$("#bottone-contact").click(function(){
$(this).hide();
$("<img src='images/loader.gif' class='loader' />").appendTo("#contact");
//Validation Required
var validation = ["nome", "email"];
var buttonInvio = "#bottone-contact";
window['buttonInvio'] = buttonInvio;
var timer = 3000;
//Form Ajax required
var form = "#contact";
var url = "forms/form-engine.php";
var isValid = $(document).TrgValidation(validation,buttonInvio,timer);
//Se è tutto ok invio
if (isValid == true) {
var dati = $(form).serialize();
//chiamata ajax
$.ajax({
type: "POST",
url: url,
//il form invia i dati all'engine
data: dati,
dataType: "html",
success: function(msg)
{
$(".loader").hide();
$("<div class='noti-box success'></div>").insertBefore(buttonInvio).html(msg).delay(timer).fadeOut();
$(buttonInvio).delay(timer).fadeIn();
},
error: function()
{
alert("Si e' verificato un errore ti preghiamo di contattarci via mail o telefonicamente.");
}
});//ajax
} else {} // se non è valido non inviare
}); //fine form
}); //fine DOM
NOTA: Potete trovare il file form-engine.php seguendo le indicazioni di questo articolo.
NOTA 2: Serialize è una funzione di jQuery che permette di recuperare in modo autonomo i valori compilati del form, la sintassi è serialize(“#IDFORM”); per maggiori informazioni visita questo articolo.
NOTA3: Ricordatevi di effettuare anche dei controlli server side (PHP) per verificare l’esistenza delle variabili fondamentali e il loro contenuto in caso di attacchi “indesiderati”.
Conclusioni e Download
[button link=”http://www.targetweb.it/tutorial/2013/target-form-validation/” color=”blue” target=”blank” size=”large”]Demo[/button]
[viral-download file1=”http://www.targetweb.it/download/2013/target-form-validation.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/plugin-validazione-form-jquery-targetvalidator/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery – Plugin validazione form jQuery: TargetValidator” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]
TargetValidator non vuole di certo mettersi a competere con “BIG” di settore (vedi jQuery validator et simila) che permettono ovviamente una maggiore personalizzazione di tutto il workflow di validazione, tuttavia può essere una valida ( e snella) alternativa per coloro che stanno cercando un plugin leggero e veloce da implementare per i propri form.
Questo articolo ti è stato utile? condividilo sui tuoi social network preferiti oppure fammi sapere le tue opinioni per migliorarlo nei commenti!
