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
mentre il javascript è questo (scusate la lunghezza ma ho preferito mettere tutto per chiarezza)
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.
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à 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: