Plugin validazione form jQuery: TargetValidator

Plugin validazione form jQuery: TargetValidator

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

uppart-condividi-passioni-online
Up Next:

UppArt – Un nuovo modo per condividere le proprie passioni

UppArt – Un nuovo modo per condividere le proprie passioni