Hola comunidad, les comparto un aporte
He estado trabajando esto con un tema que ando haciendo en bootstrap 5 y tienen un componente llamado alert.
.
Agregué en mi formulario el siguiente contenido HTML
<div id="liveAlertPlaceholder" class="py-3"></div>
Posterior a eso agregué a la respuesta de mi callback si el logueo era exitoso o no era exitoso:
function dme_login_callback( $request ) {
$creds = array(
'user_login' => $request['email'],
'user_password' => $request['password'],
'remember' => true,
);
$user = wp_signon( $creds, false );
if ( is_wp_error( $user ) ) {
return array('error' => $user->get_error_message() );
}
return array('success'=>$user);
}
También agregué las lineas siguientes a mi archivo .js
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const alert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
Y en la respuesta json del fetch validé si el error existÃa, entonces lanzaba una alerta, si no simplemente no hago nada.
.then( json => {
if( json.error ){
alert(json.error, 'danger')
}
} )
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?