Mostrare messaggi di successo o errore nella risposta Ajax per form di registrazione personalizzato WordPress
Ho questo form personalizzato all'interno di un template di pagina WordPress
<?php if(!is_user_logged_in()) {
if(get_option('users_can_register')) {
if($_POST){
$username = $wpdb->escape($_REQUEST['user_login']);
if(empty($username)) {
echo "<span style='color:#FF0000'><strong>Errore..</strong></span><br /><br />Devi inserire un nome utente.";
exit();
}
$email = $wpdb->escape($_REQUEST['user_email']);
if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email)) {
echo "<span style='color:#FF0000'><strong>Errore..</strong></span><br /><br />Inserisci un indirizzo email valido.";
exit();
}
//$random_password = wp_generate_password( 12, false );
$pass1 = $wpdb->escape($_REQUEST['pass1']);
$pass2 = $wpdb->escape($_REQUEST['pass2']);
if ($pass1 != $pass2){
echo "<span style='color:#FF0000'><strong>Errore..</strong></span><br /><br />Le password non corrispondono.";
exit();
}
$random_password = $pass1;
$status = wp_create_user( $username, $random_password, $email );
if ( is_wp_error($status) )
echo "<span style='color:#FF0000'><strong>Errore..</strong></span><br /><br />Nome utente già esistente. Provane un altro.";
else {
$from = get_option('admin_email');
$headers = 'From: '.$from . "\r\n";
$subject = "Registrazione completata!";
$msg = "Benvenuto, la registrazione è avvenuta con successo. Ecco il tuo nome utente e password.\Info:\Nome utente: $username\Password: $random_password";
wp_mail( $email, $subject, $msg, $headers );
echo "<strong>Registrazione completata. Ti è stata inviata una email con nome utente e password..";
}
exit();
} else { ?>
<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" id="registerform" class="col-xs-12" name="registerform">
<div class="row">
<div class="col-xs-12 col-md-6">
<p>
<label for="user_login">Nome utente</label>
<input id="user_login" class="input" type="text" size="20" value="" name="user_login">
</p>
<p>
<label for="user_email">Email</label>
<input id="user_email" class="input" type="email" size="25" value="" name="user_email">
</p>
<p>
Password <input type="password" name="pass1" size="25" value="">
Ripeti Password <input type="password" name="pass2" size="25" value="">
</p>
</div>
<div class="submit">
<input id="wp-register" class="button-primary pull-right col-xs-12 col-md-3" type="submit" value="Registrati" name="wp-submit" tabindex="103">
<input type="hidden" value="/login-area/?action=register&success=1" name="redirect_to">
<input type="hidden" name="user-cookie" value="1" />
</div>
</div>
</form>
<script type="text/javascript">
jQuery("#wp-register").click(function() {
var input_data = jQuery('#registerform').serialize();
jQuery.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(data){
alert('Successo');
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.status); // Vorrei ottenere quale è l'errore
}
});
return false;
});
</script>
<?php }
} else ?>
Già registrato? Accedi al tuo account con il form nella sidebar.
<?php } else { ?>
Sei già loggato...
<?php } ?>
Il PHP sembra funzionare correttamente poiché quando faccio il console log ottengo il messaggio giusto quando c'è un errore.
Come posso mostrare questi errori all'interno delle funzioni Ajax success o error?
Il codice che sto usando sembra entrare sempre nella funzione success anche se ci sono degli errori.
Vorrei sapere quali errori ci sono e stampare un messaggio con il tipo di errore da qualche parte nella pagina e se ha successo vorrei stampare un messaggio di successo.
Come posso mostrare questi errori all'interno delle funzioni di successo o errore di Ajax?
L'errore jQuery viene attivato quando la richiesta stessa fallisce, ad esempio per timeout o altri motivi. Vedi la documentazione di jQuery.
I messaggi di errore prodotti da PHP appaiono solo quando la richiesta ha successo.
Per visualizzarli, potresti fare ad esempio:
success: function(data){
jQuery( data ).appendTo( 'body' );
}
Sarà comunque necessario qualche stile :)
MODIFICA:
Dato che nel tuo script è possibile che venga restituito l'intero elemento form
, puoi prevenirlo utilizzando espressioni regolari nella callback di success
:
success: function(data){
if( ! data.match( /<form/ ) )
jQuery( data ).appendTo( 'body' );
}
Quindi puoi usare le espressioni regolari per evitare di aggiungere output che potresti non voler mostrare.

Grazie per questo. Ho provato ma aggiunge l'intera pagina. È possibile aggiungere solo i messaggi di errore o di successo?

Grazie a @websupporter sono riuscito a trovare una soluzione al mio problema.
Ho utilizzato questo all'interno della mia funzione Ajax:
success: function(data){
jQuery(data).find('.message').appendTo('#login-error');
}
E nel codice php ho fatto questo:
...
if(empty($username)) {
echo "<span class='message error'>Inserisci il nome utente.</span>";
exit();
}
...
Spero che questo possa essere utile a qualcuno.

Ho riscontrato lo stesso problema. Nessuna delle soluzioni sopra indicate ha funzionato per me. Assicurati di impostare il dataType della tua chiamata ajax su 'html' e non su 'json'.
Codice di esempio:
$.ajax({
url: ajaxurl,
type: 'POST',
dataType: 'html',
cache: false,
data: { data: data, action: 'jseditajax' }
})
.done(function(response) {
response = response.slice(0, - 1); // rimozione dello 0 all'ultima posizione della stringa
response = JSON.parse(response); // conversione da stringa a JSON
console.log(response);
});
E nel tuo file PHP puoi semplicemente fare:
echo json_encode($your_array);
Spero che questo ti sia d'aiuto!
