Controllo campi di un form

lostedsheep

Nuovo Utente
30 Nov 2010
18
0
0
Salve a tutti, sto implementando un sistema di controllo dei campi di un form di registrazione. I campi richiesti (versione giocattolo) sono email, username, password e password di conferma. Ciò che voglio fare è impedire all'utente di inviare il form se questo non ha passato la validazione. La validazione viene passata se tutti i campi non sono vuoti e se lo username e l'email non sono già stati usati. Il controllo dei campi viene eseguito in seguito all'evento blur e per controllare l'univocità di email e username faccio una richiesta con ajax ad uno script php.

Il codice del form è il seguente
HTML:
<form id="registrationform" action="dispatcher.php" method="post">
    <div class="formelem">
        <label for="email">email</label>
        <input type="text" name="email" />
        <span id="email" class="error" />
    </div>
    <div class="formelem">
        <label for="username">username</label>
        <input type="text" name="username" />
        <span id="username" class="error" />
    </div>
    <div class="formelem">
        <label for="password">password</label>
        <input type="password" name="password" />
        <span id="password" class="error" />
    </div>
    <div class="formelem">
        <label for="rpassword">conferma password</label>
        <input type="password" name="cpassword" />
        <span id="cpassword" class="error" />
    </div>
    <div class="formelem">
        <input type="submit" name="action" value="register" />
        <a href="index.php">torna alla home</a>
    </div>
</form>

mentre il javascript è questo (scusate la lunghezza ma ho preferito mettere tutto per chiarezza)

Codice:
$(document).ready(function() {
    var email = false;
    var username = false;
    var password = false;
    var cpassword = false;
    
    /* disabilita il pulsante per l'invio del form */
    $('input[value=register]').attr({
        disabled: 'disabled'
    });
    
    /* controllo il campo username o email */
    $('input[type=text]').blur(function() {
        var error = false;
        var name = $(this).attr('name');
        var value = $(this).val();
        
        /* controllo formato email */
        if (name == 'email') {
            var pattern = /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z0-9]{2,4}$/;
            if (!pattern.test(value)) {
                error = true;
                showErrorMessage('email non valida', 'email')
            }
        }
        /* controllo formato username */
        if (name == 'username') {
            pattern = /^[a-z0-9]{6,10}$/;
            if (!pattern.test(value)) {
                error = true;
                showErrorMessage('username non valido', 'username');
            }
        }
        /* controllo univocità campo */
        if (!error) {
            $.ajax({
                type: 'post',
                url: 'dispatcher.php',
                data: encodeURIComponent('action=check&field=' + name + '&value=' + value),
                success: function(data) {
                    switch (name) {
                        case 'email':
                            if (data == 'ok') {
                                email = true;
                            }else {
                                showErrorMessage('email gi&agrave; registrata', 'email');
                            }
                            break;
                        case 'username':
                            if (data == 'ok') {
                                username = true;
                            }else {
                                showErrorMessage('username non disponibile', 'username');
                            }
                            break;
                    }
                }
            });
        }
    });
    
    /* controllo i campi password */
    $('input[type=password]').blur(function() {
        var name = $(this).attr('name');
        var value = $(this).val();
        
        if (name == 'password') {
            if (value != undefined && value.length > 0) {
                password = true;
            } else {
                showErrorMessage('password non valida', 'password');
            }
        }
        if (name == 'cpassword') {
            if (value != undefined && value.length > 0) {
                var pwd = $('input[name=password]').val();
                
                if (value == pwd) {
                    cpassword = true;
                } else {
                    showErrorMessage('le password non corrispondono', 'cpassword');
                }
            } else {
                showErrorMessage('password non valida', 'cpassword');
            }
        }
    });
    
    /* nascondo gli eventuali messaggi di errori per i campi validi */
    if (email) {
        hideErrorMessage('email');
    }
    if (username) {
        hideErrorMessage('username');
    }
    if (password) {
        hideErrorMessage('password');
    }
    if (cpassword) {
        hideErrorMessage('cpassword');
    }
    
    /* se i dati nei campi sono corretti riabilito il pulsante di invio */
    if (email && username && password && cpassword) {
        $('input[value=register]').removeAttr('disabled');
    }
    
    /* DEBUG: stampa valori */
    $('div#status > span#email').html(email ? 'true' : 'false');
    $('div#status > span#username').html(username ? 'true' : 'false');
    $('div#status > span#password').html(password ? 'true' : 'false');
    $('div#status > span#cpassword').html(cpassword ? 'true' : 'false');
});

function showErrorMessage(message, target) {
    $('span.error#' + target).html(message).css({
        display: 'inline'
    });
}

function hideErrorMessage(target) {
    $('span.error#' + target).css({
        display: 'none'
    });
}

Premetto che non sono molto ferrato di javascript e vorrei capire, grazie ad un vostro aiuto, perché, all'interno della funzione invocata all'evento success di ajax, le variabili email e username rimangono a false, come anche password e cpassword; il problema sembrerebbe dovuto alla visibilità delle variabili ma le ho provate tutte senza soluzione.

Un grazie in anticipo per l'eventuale aiuto.
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
Z Controllo campi di un form php PHP 5
H Effettuare il controllo dei campi di un form e cambiare l' action dinamicamente Javascript 1
P controllo campi form istantaneo PHP 4
D script controllo campi form non va su FF Javascript 2
B Controllo form: uno dei 2 campi obbligatorio Javascript 11
L Controllo e confronto dati immessi in 2 campi Data in un form (mysql) PHP 1
P Predefinito Controllo campi form contenuto in un DIV Classic ASP 0
D Controllo su campi Form Javascript 3
M Controllo campi in un form Javascript 2
A controllo in js dei campi di un form Javascript 1
A Problema form: controllo campi vuoti e inibizione pulsante invio Javascript 5
elpirata [Javascript] Controllo campi required non effettuato Javascript 2
F Controllo dati sui campi di input tramite php PHP 1
I controllo campi vuoti PHP 2
IImanuII Mail: controllo campi PHP 49
piccino Controllo sui campi PHP 2
J controllo due campi PHP 4
D Upload Baol controllo campi Classic ASP 1
bartjsp Controllo campi radio Javascript 1
B Controllo inserimento dati in Campi PHP 0
Z Controllo campi vuoti, ritorno al modulo d'invio PHP 10
J Controllo Campi Classic ASP 5
O Controllo campi prima di eseguire uno script PHP 1
M pulsante per aprire una maschera che contiene controllo schede MS Access 0
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
Z Controllo giorni MYSQL PHP 0
M Problema con controllo form in real time jQuery 6
MarcoGrazia jquery validate() controllo checkbox jQuery 2
M Controllo del codice fiscale/partita iva PHP 11
S Software windows10 per controllo contenuti web Windows e Software 6
S Controllo appuntamenti disponibili sul db PHP 5
L input (controllo se è stato modificato o no). PHP 1
W Controllo competitors serp SEO e Posizionamento 2
bubino8 [Javascript] popup di controllo elimina dopo window.print(); Javascript 0
M [MS Access] controllo valido se MS Access 8
MarkRed Come indicare, in una maschera, il primo controllo d'input, tipo "SetFocus" jQuery 9
C [PHP] Controllo <select> comportamento anomalo PHP 2
A [PHP] Controllo nome utente form di registrazione PHP 4
L [PHP] controllo dimensione immagine per il resize PHP 2
M [ASP] Upload file da form controllo Classic ASP 5
P [PHP] Controllo al checkbox privacy PHP 6
S [MySQL] Controllo dati di una tabella in tempo reale MySQL 0
T [php] controllo su estensione file PHP 7
M [PHP] Script per controllo disponibilitá negozio in citta PHP 4
I Recupero accesso pannello di controllo dominio Leggi, Normative e Fisco 2
R [MS Access] CONDIZIONE CHE CAMBIA PROPRIETA' DI UNA CONTROLLO MS Access 7
M [PHP] Dubbio controllo IF PHP 15
M [PHP] Controllo campo cap con trattino oltre ai numeri PHP 3
Fede72 Controllo registrazioni PHP Mysql PHP 5
L jquery e json controllo valori da determinate chiavi - keys jQuery 0

Discussioni simili