Plugin validazione form jQuery: TargetValidator

Oggi vediamo come usare il plugin jQuery TargetValidator per la validazione dei nostri form in pochi semplici passi.


Demo

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

Demo

Per scaricare il file completo devi condividere l'articolo su un social network.

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!

Lascia la tua opinione

×