Nello sviluppo di un form HTML è buona norma aggiungere tutte le funzionalità per filtrare e validare i dati inseriti nei campi, in modo da gestire eventuali errori direttamente lato client prima dell’invio al server.
Prendiamo in considerazione come esempio, un form di registrazione utenti nel quale il controllo, è verificare se “l’username” oppure l’email inserita è già presente nel database.
Quindi per evitare che all’invio dei dati, il server ci risponda con un messaggio del tipo: “l’username inserita esiste già” e conseguente ricompilazione dei campi del form, possiamo aggiungere un controllo lato client con JQuery, che con una chiamata Ajax ci permette di verificare la presenza del dato inserito direttamente nella compilazione del campo nel form.
Come esempio in questo articolo, consideriamo un modulo di registrazione nel quale facciamo un controllo per verificare se l’email inserita dall’utente è presente o meno nel database.
Registrazione.html
<html>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function() { $("#email").keyup(function(){
var email = this.id;
$.ajax({ type: "POST",
url: "checkemail.php",
data: email+"="+this.value,
success: function(response){
if(response== '0')
{
$("#check_email").html('<img src="avilable.jpg" > Disponibile ');
}
else
{
$("#check_email").html('<img src="not_available.jpg" > Non disponibile ');
$("#email").val("");
}
}
});
});
});
</script>
</head>
<body>
<h2>Form di registrazione</h2>
<form action="registration.php" method="post">
<div>
<label>
<span>Nome:</span>
<input type="text" id="nome" name="nome" required autofocus />
</label>
</div>
<div>
<label>
<span>Cognome:</span>
<input type="text" id="cognome" name="cognome" required autofocus />
</label>
</div>
<div>
<label>
<span>Email:</span>
<input id="email" name="email" type="email" required />
<span id="check_email"></span>
</label>
</div>
<div>
<label>
<span>Password:</span>
<input type="password" name="password" id="password" />
</label>
</div>
<div>
<button name="submit" type="submit" id="button-submit">Invia</button>
</div>
</form>
</body>
</html>
Come vediamo dal codice, per prima cosa richiamiamo la libreria JQuery all’interno del file, poi con una chiamata Ajax alla pagina “checkemail.php”.
Ad ogni carattere inserito nel campo email, verifichiamo se i dati inseriti sono presenti o meno nel db e in base alla risposta ottenuta gestiamo la visualizzazione del risultato con delle icone.
La pagina “checkemail.php” sarà la seguente:
Checkemail.php
<?php
$link = mysqli_connect('localhost', 'root', 'password', 'db_name');
$email=$_POST['email'];
$query="SELECT email FROM users WHERE email='$email'";
$result=mysqli_query($link,$query);
if(mysqli_num_rows($result)>0)
{
echo '1';
}
else
{
echo '0';
}
?>