Mostrar mensajes de éxito o error en respuesta Ajax para formulario de registro personalizado de WordPress
Tengo este formulario personalizado dentro de una plantilla de página de 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>Error...</strong></span><br /><br />Debes completar el nombre de usuario.";
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>Error...</strong></span><br /><br />Por favor usa una dirección de email válida.";
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>Error...</strong></span><br /><br />Las contraseñas no coinciden.";
exit();
}
$random_password = $pass1;
$status = wp_create_user( $username, $random_password, $email );
if ( is_wp_error($status) )
echo "<span style='color:#FF0000'><strong>Error...</strong></span><br /><br />El nombre de usuario ya existe. Por favor intenta con otro.";
else {
$from = get_option('admin_email');
$headers = 'From: '.$from . "\r\n";
$subject = "¡Registro exitoso!";
$msg = "Bienvenido, ya estás registrado. Aquí están tu nombre de usuario y contraseña.\nInfo:\nUsuario: $username\nContraseña: $random_password";
wp_mail( $email, $subject, $msg, $headers );
echo "<strong>Te has registrado correctamente. Se ha enviado un email con tu nombre de usuario y contraseña.";
}
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">Nombre de usuario</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>
Contraseña <input type="password" name="pass1" size="25" value="">
Repetir Contraseña <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="Registrarse" 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('Éxito');
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.status); // Me gustaría obtener cuál es el error
}
});
return false;
});
</script>
<?php }
} else ?>
¿Ya estás registrado? Inicia sesión en tu cuenta con el formulario de la barra lateral.
<?php } else { ?>
Ya has iniciado sesión...
<?php } ?>
El PHP parece funcionar bien ya que cuando hago console.log obtengo el mensaje correcto cuando hay un error.
¿Cómo puedo mostrar estos errores dentro de las funciones success o error de Ajax?
El código que estoy usando siempre parece llegar a la función success incluso si hay algunos errores.
Me gustaría saber qué errores hay y mostrar un mensaje con el tipo de error en algún lugar de la página y si tiene éxito me gustaría mostrar un mensaje de éxito.

¿Cómo puedo mostrar estos errores dentro de las funciones de éxito o error de Ajax?
El error de jQuery se activa cuando la solicitud en sí falla, por ejemplo por tiempo de espera y otros. Consulta la documentación de jQuery.
Los mensajes de error, que son producidos por PHP, solo aparecen cuando la solicitud tiene éxito.
Para mostrarlos, podrías hacer por ejemplo:
success: function(data){
jQuery( data ).appendTo( 'body' );
}
Aunque necesitará algo de estilo :)
EDITADO:
Dado que en tu script es posible que se muestre todo el elemento form
, puedes evitarlo usando expresiones regulares en la devolución de llamada success
:
success: function(data){
if( ! data.match( /<form/ ) )
jQuery( data ).appendTo( 'body' );
}
Así que puedes usar expresiones regulares para evitar añadir salida que quizás no quieras mostrar.

Gracias por esto. Lo he intentado pero agrega toda la página. ¿Es posible agregar solo los mensajes de error o éxito?

Gracias a @websupporter logré encontrar una solución a mi problema.
He usado esto dentro de mi función Ajax:
success: function(data){
jQuery(data).find('.message').appendTo('#login-error');
}
Y en el código PHP he hecho esto:
...
if(empty($username)) {
echo "<span class='message error'>Por favor ingresa tu nombre de usuario.</span>";
exit();
}
...
Espero que esto sea útil para alguien.

Me encontré con el mismo problema. Ninguna de las soluciones anteriores me funcionó. Por favor, asegúrate de establecer el dataType de tu llamada ajax a 'html' en lugar de 'json'.
Código de ejemplo:
$.ajax({
url: ajaxurl,
type: 'POST',
dataType: 'html',
cache: false,
data: { data: data, action: 'jseditajax' }
})
.done(function(response) {
response = response.slice(0, - 1); // eliminando el 0 en la última posición del string
response = JSON.parse(response); // convertir string a JSON
console.log(response);
});
Y en tu archivo PHP puedes simplemente hacer:
echo json_encode($tu_array);
¡Espero que esto ayude!
