JQuery, PHP – Validazione dei campi di un form prima dell’invio

Tempo fa abbiamo visto come controllare codice fiscale, partita iva, email e prezzo proveniente da un form attraverso l’uso di funzioni in php. Questo controllo avviene, naturalmente, dopo l’invio dei dati alla pressione di un tasto da parte dell’utente.

Con l’uso incrociato di php e di jquery abbiamo la possibilità di fare i controlli a monte, cioè prima del submit del form. I controlli saranno effettuati questa volta da lato utente e i dati saranno inviati al server solo se non si incontreranno errori.

Nel file da scaricare troverete:
– jquery.js : necessario per importare le librerie di jquery.
– style.css : formatta il layout del form; personalizzabile a vostra discrezione.
– index.php : il cuore dello script, che andremo a vedere qui sotto.

Lo script può essere preso così com’è senza modifiche (a eccezione, naturalmente, dell’aspetto grafico che si deve integrare con il vostro sito). Oltre al controllo che i campi non siano vuoti, nello specifico troveremo la funzione per controllare una data e un’email passate.

Download script

Pagina diretta alla scheda e al download del codice

Il form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
<form action="" method="post" name="form_utente" id="form_utente">

    <div class="campo">
        <div class="nome_campo">Nome</div>
        <input type="text" name="nome" id="nome" value="<?php if(isset($_POST['nome'])) echo $_POST['nome'];?>" class="input" />
    </div>

    <div class="clear"></div>

    [...]

    <a href="javascript:void(0)" onclick="check_reg();" style="margin-top:22px;">Invia</a>

    <div class="clear"></div>

</form>

Il form avrà campi simili tra loro, per quanto riguarda la struttura (la parentesi quadra con i puntini sostituisce tutti gli altri campi, che troverete nello script da scaricare). In particolare, ogni input avrà:
– un attributo id con valore associato (i controlli in jquery si riferiranno a questi attributi).
– un controllo in php nell’attributo value: in caso di errore, il form non sarà inviato e la variabile in post sarà ripresa, in modo che l’utente abbia ancora a disposizione i dati che ha inserito.

L’attributo id="form_utente" ci è indispensabile per inviare il form. Una volta effettuati i controlli in jquery, se tutto sarà andato a gonfie vele, si farà automaticamente il submit del form che ha associato questo attributo.

Il controllo inizierà non appena l’utente cliccherà sul link “Invia”. Il link non porta a nessuna pagina, ma avvia la funzione check_reg() che si occuperò di effettuare i vari controlli nei campi.

I controlli con jquery

Per comodità di forma, i valori degli id dei vari campi input obbligatori sono stati messi in un array php.

1
2
3
4
5
6
7

//metto il nome degli id dei campi in un array
$id_campi[]="nome";
$id_campi[]="cognome";
$id_campi[]="sesso";
$id_campi[]="data_nascita";
$id_campi[]="telefono";
$id_campi[]="email";

In questo modo ci sarà facile, attraverso un ciclo, stampare nel sorgente della pagina il controllo affinché tutti i campi non siano vuoti:

1
2
3
4
5
6
7
8
9

<!-- Controllo che i campi non siano vuoti -->
<?php foreach($id_campi as $value){?>
if($('#<?=$value?>').val()==""){
	check=true;
	$('#<?=$value?>').addClass("errore");
}else{
	$('#<?=$value?>').removeClass("errore");
}
<? }?>

Come si può notare, in caso di errore si aggiunge all’input (che ha id pari al valore passato) una classe css chiamata “errore” (nel mio caso, borda semplicemente di rosso il campo di input corrispondente).

Una volta che ci siamo assicurati che tutti i campi obbligatori non siano vuoti, ci occupiamo con delle funzioni specifiche di controllare la correttezza della data e dell’email passate. Anche in questo caso, in caso di errore sarà aggiunta la classe “errore”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- Data di nascita -->
if( ($('#data_nascita').val().substring(2,3)!="/" && $('#data_nascita').val().substring(2,3)!="-") ||
	($('#data_nascita').val().substring(5,6)!="/" && $('#data_nascita').val().substring(5,6)!="-") ||
	isNaN($('#data_nascita').val().substring(0,2)) ||
	isNaN($('#data_nascita').val().substring(3,5)) ||
	isNaN($('#data_nascita').val().substring(6,10)) ||
	$('#data_nascita').val().substring(0,2)>31 ||
	$('#data_nascita').val().substring(3,5)>12 ||
	$('#data_nascita').val().substring(6,10)<1900
){
	check=true;
	$('#data_nascita').addClass("errore");
}else{
	$('#data_nascita').removeClass("errore");
}

<!-- Email -->
var email_check=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
if(!email_check.test($('#email').val())){
	check=true;
	$('#email').addClass("errore");
}else{
	$('#email').removeClass("errore");
}

Infine, se tutto è andato per il meglio e non si sono riscontrati errori, sarà fatto il submit del form e saranno passati come post i valori inseriti dall’utente:

1
2
3
4

<!-- invio del form in caso non siano stati riscontrati errori -->
if(check==false){
	document.getElementById("form_utente").submit();
}