Articoli,howto,guide di programmazione & Informatica generale.

In questa guida vi spiegherò come utilizzare Jquery-Validator per validare un form in modo semplice e veloce.
I pacchetti necessari sono:

• jquery
• jquery-validate

Come prima cosa dopo aver scaricato i due pacchetti, che comunque troverete nell'archivio, bisogna includere i due file javascript.

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery-validate/jquery.validate.js"></script>
<script type="text/javascript" src="js.js"></script>

Creiamo il nostro form a piacimento:

	<form action="" id="form_da_validare">
		<table>
			<tr>
				<td>Nome</td>
				<td><input type="text" id="username" name="username"></td>
			</tr>
			<tr>
				<td>Cognome</td>
				<td><input type="text" id="cognome" name="cognome"></td>
			</tr>
			<tr>
				<td>Email</td>
				<td><input type="text" id="email" name="email"></td>
			</tr>
			<tr>
				<td>Termini del servizio</td>
				<td><input type="checkbox" id="terms" name="terms"></td>
			</tr>
			<tr>
				<td>Invia</td>
				<td><input type="submit"></td>
			</tr>
		</table>
	</form>
	

E sulla base di questo codice creiamo il nostro file js.js contenente le funzioni di validazione.

$().ready(function() {
	$("#form_da_validare").validate({
		submitHandler: function() { 
			alert('tutti i dati sono stati inseriti correttamente!');
			document.getElementById('form_da_validare').submit();
		},			
		rules: {
			username: {
				required: true,
				minLength: 5,
				maxLength: 32,
			},
			
			nome: {
				required: true
			},
			
			cognome: {
				required: true,
			},
			
			email: {
				required: true,
				email: true
			},
			
			terms: "required"
		},
		messages: {
			username: {
				required: "Inserisci l'username",
				minLength: "Minimo 5 lettere",
				maxLength: "Massimo 32 lettere"
			},
			nome: {
				required: "Inserisci il nome."
			},
			cognome: {
				required: "Inserisci il cognome"
			},
			email: {
				required: "Inserisci un'email.",
				email: "Inserisci un email valida."
			},
			terms: {
				required: "Devi accettare i termini del servizio."
			}
		}
	});
});

Come prima cosa nel codice incontriamo submitHandler che tratteremo a fine guida.
Procedendo si incontra

	rules: {
	
	}

all'interno del quale ci sono tutti gli elementi da validare, quali:

• username
• nome
• cognome
• email
• terms

ed all'interno di ogni elemento c'è la regola che deve essere rispettata in fase di validazione.
Tutte le possibili regole che potremmo impostare sono le seguenti:

• required
• remote
• email
• url
• date
• dateISO
• dateDE
• number
• numberDE
• digits
• creditcard
• equalTo
• accept
• maxLength
• minLength
• rangeLength
• range
• max
• min

Di seguito la spiegazione di ognuno e dei suoi possibili utilizzi:

• Nome	Codice
  required	rules:{ nomecampo:{ required: true } }

  Spiegazione: E' richiesto l'inserimento di quel determinato campo,utilizzato in molti metodi.

• Nome	Codice
  remote	rules:{ nomecampo:{ remote: "/file/su/cui/effettuare/action.php" } }

  Spiegazione: Viene effettuato un controllo tramite il get di una pagina .php o asp tramite Ajax. Verrà inviato il dato di quel determinato campo, e PHP o ASP dovrà restuire true o false.
  Nel caso sopra sarà richiamato il file action.php così: action.php?nomecampo=valoredelnomecampo .
  Possibili utilizzi: Usato comunemente per controllare che un determinato dato (Esempio: email,username,etc) non sia già registrato nel database.

• Nome	Codice
  email	rules:{ email:{ required: true, email: true } }

  Spiegazione: Viene controllata la validità di un indirizzo email.
  

• Nome	Codice
  url	rules:{ sitoweb:{ required: true, url: true } }

  Spiegazione: Viene controllata la validità di un indirizzo internet. (http://www.big-bug.net).
  

• Nome	Codice
  date	rules:{ data:{ required: true, date: true } }

  Spiegazione: Viene controllata la validità di una data.

• Nome	Codice
  dateISO	rules:{ data:{ required: true, dateISO: true } }

  Spiegazione: Viene controllata la validità di una data in formato ISO.

• Nome	Codice
  dateDE	rules:{ data:{ required: true, dateDE: true } }

  Spiegazione: Viene controllata la validità di una data DE (19.07.2008).

• Nome	Codice
  number	rules:{ campo_numero:{ required: true, number: true } }

  Spiegazione: Controlla il corretto inserimento di un numero con e senza segno, negativo e positivo.

• Nome	Codice
  numberDE	rules:{ campo_numero:{ required: true, numberDE: true } }

  Spiegazione: Controlla il corretto inserimento di un numero con e senza segno, negativo e positivo.
  La differenza con il precedente è che la virgola va inserita con la ',' e non con il '.' .

• Nome	Codice
  digits	rules:{ campo_numero:{ required: true, digits: true } }

  Spiegazione: Controlla il corretto inserimento di un numero intero.

• Nome	Codice
  creditcard	rules:{ campo_cdc:{ required: true, creditcard: true } }

  Spiegazione: Controlla il corretto inserimento di un numero di carta di credito.

• Nome	Codice
  equalTo	rules:{ password: { required: true }, campo:{ equalTo: "#password" } }

  Spiegazione: Controlla che il campo inserito sia uguale ad un altro input, nel caso d'esempio al campo con id 'password'
  Possibili utilizzi: Usato comunemente per inserire due password uguali nei form di registrazione.

• Nome	Codice
  accept	rules:{ campo:{ required: true, accept: "jpg|gif|png" } }

  Spiegazione: Controlla che sia stata inserita un'estensione tra quelle specificate.

• Nome	Codice
  maxLength	rules:{ campo:{ required: true, maxLength: 32 } }

  Spiegazione: Controlla che siano stati inseriti massimo 32 caratteri.

• Nome	Codice
  minLength	rules:{ campo:{ required: true, minLength: 32 } }

  Spiegazione: Controlla che siano stati inseriti minimo 32 caratteri.

• Nome	Codice
  rangeLength	rules:{ campo:{ required: true, rangeLength: [2,5] } }

  Spiegazione: Controlla che i caratteri immessi siano compresi tra 2 e 5 lettere.

• Nome	Codice
  range	rules:{ campo:{ required: true, range: [2,5] } }

  Spiegazione: Controlla che il valore dei numeri immessi sia compreso tra 2 e 5.

• Nome	Codice
  max	rules:{ campo:{ required: true, max: 55 } }

  Spiegazione: Controlla che il valore inserito non sia maggiore di 55

• Nome	Codice
  min	rules:{ campo:{ required: true, min: 55 } }

  Spiegazione: Controlla che il valore inserito non sia minore di 55

E' possibile naturalmente richiamare più regole per ogni campo, per esempio:

rules:{
  username:{
    required: true,
    minLength: 5,
    maxLength: 32,
    remote: "action.php"
  }
}	

In questo caso controlleremo che il campo username sia riempito con minimo 5 caratteri e massimo 32 caratteri ed in più controlleremo che l'username inserito non sia già nel nostro database.
Un tipico esempio di file action.php potrà essere:

<?php
    $username = $_GET[username];
    if(isset($username)){
        $query = mysql_query("SELECT `username` FROM `tabella_utenti` WHERE `username` = '$username'") or die(mysql_error());
        if(mysql_num_rows($query) == 0){
            echo 'true';
        }else{
            echo 'false';
        }
    }
?>

Controlla semplicemente l'esistenza di un campo passatogli tramite GET restituendo true o false.
Dopo questa lunga parentesi sulle possibili regole impostabili, andando avanti nel codice incontriamo:

messages: {
	
	}

All'interno di ciò come vedete c'è un messaggio di errore per ogni regola, molto semplice.

rules: {
   username: {
     required: true,
     minLength: 5,
	 maxLength: 32,
   }
}

Il messages relativo è appunto:

messages: {
	username: {
	  required: "Inserisci l'username",
      minLength: "Minimo 5 lettere",
	  maxLength: "Massimo 32 lettere"
	}
}

Detto ciò posso procedere alla spiegazione di submitHandler

submitHandler: function() { 
document.getElementById('form_da_validare').submit();
}

dentro il quale saranno inserite tutte le operazioni da effettuare nel caso di esito di validazione positivo, in altre parole, se tutti i dati inseriti nel form sono corretti.
Nel caso sopra ho inserito semplicemente il submit del form, l'invio del form.
Detto ciò, la guida si conclude.
Per qualsiasi spiegazione o chiarimento commentate pure.
In allegato è presente tutto l'esempio completo,mentre qua è possibile trovarlo online.