controllo form: esistenza di un campo prima di inviare i dati - Ajax o jQuery?

[the-bit]

Buon giorno,
sto ultimando un sistema di iscrizione utente e uno dei passaggi chiave che vorrei realizzare è quello di controllare - prima ancora dell'invio dei dati - l'esistenza o meno di alcuni dati nel Database (mysql).
Ad esempio se l'utente che si iscrive sceglie un username che già esiste vorrei che gli uscisse un messaggio affianco al campo "username" prima ancora che esso completi il form per intero.
Ovviamente ho già messo un controllo che fa questa cosa, ma solo dopo aver inviato il form dati.
Due precisazione:
1) l'applicazione è in php+MySql;
2) ho una lieve infarinatura di jQuery (ma molto lieve!!!); di ajax niente!

Detto ciò: cosa è meglio usare? Ajax o jQuery?
Avreste da consigliarmi un tutorial a riguardo?

Grazie.

[fcaldera]

http://www.ajaxlines.com/ajax/stuff/...and_jquery.php

o anche
http://www.9lessons.info/2008/12/twi...y-plug-in.html
http://www.highoncoding.com/Articles..._Ajax_API.aspx
http://jqueryfordesigners.com/using-...alidate-forms/
...

[artorius]

ehm, allora, due info prima: jQuery è una libreria di Javascript che implementa determinate funzionalità, che JS di suo non ha, garantendo anche che funzionino su tutti i browser che supporta. AJAX è una funzionalità, implementata tramite JS, che permette di lanciare una chiamata Asincrona sul server senza ricaricare la pagina, e di manipolare la risposta tramite JS.

Ora, jQuery implementa già AJAX tra le sue funzionalità ( http://api.jquery.com/category/ajax/ ).

Ora che sai questo, devi implementare in PHP una pagina che, preso un username come parametro POST, controlla se esiste un utente con quell'username (chiami il file check.username.php) e stampando "true" se non esiste un utente con l'username passato, "false" altrimenti (anche se l'username non è valido, come null, "" o simili).

In JS, devi applicare all'evento onblur dell'input una funzione che lancia la chiamata AJAX sul file passandogli il value dell'input come parametro. All'evento onSuccess effettui un eval della risposta ed agisci di conseguenza, es:

$('#UsenameField').blur(function(){
  $.ajax({
    url: 'scripts/get/check.username.php',
    type: 'post',
    data: 'username='+this.value
    success: function(data) {
      var result = eval(data); //result sarà true se data == "true", false se data =="false"
      if(result){
         //Controllo passato
      }
      else{
         //Controllo non passato
      }
    }
});

[the-bit]

Originariamente inviato da artorius
ehm, allora, due info prima: jQuery è una libreria di Javascript che implementa determinate funzionalità, che JS di suo non ha, garantendo anche che funzionino su tutti i browser che supporta. AJAX è una funzionalità, implementata tramite JS, che permette di lanciare una chiamata Asincrona sul server senza ricaricare la pagina, e di manipolare la risposta tramite JS.

Ora, jQuery implementa già AJAX tra le sue funzionalità ( http://api.jquery.com/category/ajax/ ).

Ora che sai questo, devi implementare in PHP una pagina che, preso un username come parametro POST, controlla se esiste un utente con quell'username (chiami il file check.username.php) e stampando "true" se non esiste un utente con l'username passato, "false" altrimenti (anche se l'username non è valido, come null, "" o simili).

In JS, devi applicare all'evento onblur dell'input una funzione che lancia la chiamata AJAX sul file passandogli il value dell'input come parametro. All'evento onSuccess effettui un eval della risposta ed agisci di conseguenza, es:

$('#UsenameField').blur(function(){
  $.ajax({
    url: 'scripts/get/check.username.php',
    type: 'post',
    data: 'username='+this.value
    success: function(data) {
      var result = eval(data); //result sarà true se data == "true", false se data =="false"
      if(result){
         //Controllo passato
      }
      else{
         //Controllo non passato
      }
    }
});

Ciao,
non sono molto pratico di JS.
Potresti, per cortesia, farmi un esempio pratico?

Io ho il mio form:

<form action="checkFields.php" method="post">
    
    <label for="username">
    <input type="text" name="username">
    
    <! -- pulsanti submit... -->
</form>

Come faccio a far apparire il classico quadratino rosso accanto al campo "username" col messaggio che l'utente scelto esiste O non è valido ?

Grazie mille.

@ fcaldera: darò un'occhiata anche ai tuoi links.

[the-bit]

Ho provateo a riguadarmi la funzione, ma non ho capito come integrarla e come realizzare quanto scritto nel post precedente.

[artorius]

Originariamente inviato da the-bit

<form action="checkFields.php" method="post">
    
    <label for="username">
    <input type="text" name="username">
    
    <! -- pulsanti submit... -->
</form>

Come faccio a far apparire il classico quadratino rosso accanto al campo "username" col messaggio che l'utente scelto esiste O non è valido ?

Mi sa che non hai molto chiaro cosa sia il for del label... non devi indicare il nome del campo, ma l'id del campo:

<form action="checkFields.php" method="post">
    
    <label for="UsenameField">
    <input type="text" name="username" id="UsenameField">
    
    <! -- pulsanti submit... -->
</form>

a questo punto basta che scrivi:

<script type="text/javascript">
$(document).ready(function(){
   $('#UsenameField').blur(function(){
      $.ajax({
         url: 'scripts/get/check.username.php',
         type: 'post',
         data: 'username='+this.value
         success: function(data) {
            var result = eval(data); //result sarà true se data == "true", false se data =="false"
            if(result){
               //Controllo passato
               //Sotto questo commento devi mettere il codice per togliere il bordo rosso o quello che usi
            }
            else{
               //Controllo non passato
               //Sotto questo commento devi mettere il codice per aggiungere il bordo rosso o quello che usi
            }
         }
   });
});
</script>

Chiaramente devi completare il codice con l'effetto da visualizzare.