Validazione campi form ajax php

[pezzo]

Ciao ragazzi,
vi allego il codice che uso per la validazione di un campo email di un form tramite ajax e php.
Il problema è che vorrei fare i controlli su altri campi del form, avevo pensato di utilizzare lo stesso codice passando via GET altri parametri al file php... ma credo che le variabili si sovrascrivano perché il messaggio di errore di un campo viene restituito in un altro e così via.

Così vi chiedo, come faccio ad adattare questo codice per una validazione su più campi?

Grazie

var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
    
function createQueryString() {
    var email = document.getElementById("email").value;
        
    var queryString = "mode=email&value=" + email;
    
    return queryString;
}

function emailValidation() {
    createXMLHttpRequest();
    
    var queryString = "validate_register.php?";
    queryString = queryString + createQueryString() 
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults();
        }
    }
}

function parseResults() {
    var responseDiv = document.getElementById("risultato_email");
    if(responseDiv.hasChildNodes()) {
        responseDiv.removeChild(responseDiv.childNodes[0]);
    }
    
    var responseText = document.createTextNode(xmlHttp.responseText);
    responseDiv.appendChild(responseText);
}

[pezzo]

Sto impazzendo, nel form richiamo NomeValidation, CognomeValidation e UsernameValidation in modo da passare via get i valori della input ad una pagina php e stampare il risultato nel div risultato...

Ecco il form:

<form name="registrazione_utenti" method="post" action="register.php">
  <fieldset>
    <legend>Registrazione</legend>
      <div><label for="nome">Nome</label> <input id="nome" name="nome" onKeyUp="NomeValidation();" value="">
        <div id="risultato_nome"></div>
      </div>
      <div><label for="cognome">Cognome</label> <input id="cognome" name="cognome" onKeyUp="CognomeValidation();" value="">
        <div id="risultato_cognome"></div>
      </div>
      <div><label for="username">Username</label> <input id="username" name="username" onKeyUp="UsernameValidation();" value="">
        <div id="risultato_username"></div>
      </div>
</form>

Quando però richiamo le funzioni le prime 2 funzionano, la terza si comporta come se avessi chiamato ValidationCognome, perché?

Ecco il javascript:

var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
    
function createQueryString(variabile) {
    var valore = document.getElementById(""+ variabile + "").value;
        
    var queryString = "mode=" +variabile + "&value=" + valore;
    
    return queryString;
}

//validazione del nome
function NomeValidation() {
    createXMLHttpRequest();
    
    var queryString = "validate_register.php?";
    queryString = queryString + createQueryString("nome") 
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChangeNome;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}
    
function handleStateChangeNome() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults("nome");
        }
    }
}

//validazione del cognome
function CognomeValidation() {
    createXMLHttpRequest();
    
    var queryString = "validate_register.php?";
    queryString = queryString + createQueryString("cognome") 
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChangeCognome;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}
    
function handleStateChangeCognome() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults("cognome");
        }
    }
}

//validazione dello username
function UsernameValidation() {
    createXMLHttpRequest();
    
    var queryString = "validate_register.php?";
    queryString = queryString + createQueryString("username") 
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChangeUsername;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}
    
function handleStateChangeUsername() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults("username");
        }
    }
}

function parseResults(variabile) {
    var responseDiv = document.getElementById("risultato_" + variabile + "");
    if(responseDiv.hasChildNodes()) {
        responseDiv.removeChild(responseDiv.childNodes[0]);
    }
    
    var responseText = document.createTextNode(xmlHttp.responseText);
    responseDiv.appendChild(responseText);
}

AIUTO!

[TrueLies]

Non so mica quanto ti meriti effettuare delle validazioni a questa maniera. Il problema che riscontri è difficilmente individuabile senza conoscere anche i codici html coinvolti, ad ogni modo una validazione con Ajax è un misto di validazione dal lato client e dal lato server, che alla fine del giro non soddisfa nè l'uno ne l'altro.
Ti meriterebbe prima validare in javascript senza usare affatto Ajax; in tal caso la validazione non ha affatto lo scopo di garantire il server riguardo nè alla validità dei dati nè alla loro integrità (men che meno se passati via get) ma semplicemente di agevolare le cose sul lato delle interfacce GUI utente.
Una volta che i tuoi dati sono passati al server, devi rivalidarli comunque. Certo, puoi anche affidarti solo a javascript, ma poi chi to garantisce che non sono avvenute injections di alcuna sorta?
valida sul lato client con javascript, su quello server per il server, e usa ajax per altri obbiettivi.

[pietro09]

Originariamente inviato da TrueLies
Non so mica quanto ti meriti effettuare delle validazioni a questa maniera. Il problema che riscontri è difficilmente individuabile senza conoscere anche i codici html coinvolti, ad ogni modo una validazione con Ajax è un misto di validazione dal lato client e dal lato server, che alla fine del giro non soddisfa nè l'uno ne l'altro.
Ti meriterebbe prima validare in javascript senza usare affatto Ajax; in tal caso la validazione non ha affatto lo scopo di garantire il server riguardo nè alla validità dei dati nè alla loro integrità (men che meno se passati via get) ma semplicemente di agevolare le cose sul lato delle interfacce GUI utente.
Una volta che i tuoi dati sono passati al server, devi rivalidarli comunque. Certo, puoi anche affidarti solo a javascript, ma poi chi to garantisce che non sono avvenute injections di alcuna sorta?
valida sul lato client con javascript, su quello server per il server, e usa ajax per altri obbiettivi.

Questa è una di quelle cose di base che meriterebbe di essere messa in evidenza nelle discussioni utili, non tanto per il concetto espresso, che tutti dovremo sapere, quanto per come viene spiegato, semplicemente e senza inutili fronzoli.

[pezzo]

Ok, ricevuto...

in ogni caso, la validazione via client in ajax nella mia soluzione è solo un primo passo a cui segue una validazione via server proprio per evitare i fenomeni di cui parla TrueLies...

Hai ragione, la validazione in AJAX favorisce l'utente solo a livello di interfaccia e per la sensazione di interattività che stimola. Tuttavia, credo che sia una strada percorribile se si mettono in gioco tutte le precauzioni del caso via server...

Ho scoperto che il problema per cui ho aperto questo post era solo dovuto alla mia distrazione e al fatto che cercavo nel posto sbagliato l'errore! Avevo commesso delle ingenuità nella pagina php e, a causa della mia minore esperienza in AJAX, avevo dato per scontato che il problema non fosse lì.

Comunque grazie per i preziosi consigli