Ecco il mio script di login jQuery / AJAX proccess.
Hai solo bisogno di creare alcuni div / spans nel tuo form per il messaggio di errore e il caricamento e per far funzionare questo, nel tuo script PHP di accesso devi aggiungere se il login è corretto echo'1 '; o qualunque sia la tua eco di successo nel tuo cambio di script PHP che in questa parte del codice jQuery
if(result === '1' ) { // This is PHP success echo, in my case is number 1
window.location='index.php'; // Uppon successfull login in my case redirects to index.php
}
$(function() {
$( '.login' ).submit(function(e) { // My form has class login, dont forget to change this to your form class or id
e.preventDefault();
var error = 0;
var lForm = $( this ),
lName = $( '.login input[name="login"]' ).val(),
lPass = $( '.login input[name="password"]' ).val(),
errMsg = $( '.login-err' ); // Create div or span with class login-err or whatever class you wish
if ( lName == 'Username' ) { // Username in this case is default value
error = 1;
errMsg.html( '<p>Enter User Name and Password.</p>' ); //Here insted .html you could use .text
}
if ( lName.length > 32 || lName.length < 3 ) {
error = 1;
errMsg.html( '<p>Name must be between 3-32 characters.</p>' );
}
if ( lPass == 'Password' ) { // Password in this case is default value
error = 1;
errMsg.html( '<p>Enter User Name and Password.</p>' );
}
if ( error ) {
errMsg
.fadeIn( 'slow' )
.delay( 1800 )
.fadeOut( 'slow' );
return false;
}
else {
$( this ).fadeOut(function() {
$( '.loading' ).fadeIn(function() { // For this create div or span with class "loading" or whatever class you wish and put some pretty loader gif in it
$.ajax({
type: 'POST',
url: lForm.attr( 'action' ),
data: lForm.serialize(),
success: function(result) {
if(result === '1' ) {
window.location='index.php';
}
else {
$( '.loading' ).fadeOut(function() {
lForm.fadeOut( 'slow' );
errMsg
.fadeIn( 'slow' )
.delay( 1800 )
.fadeOut( 'slow' )
.html( '<p>Incorrect User Name or Password.</p>' );
lForm.delay( 2400 ).fadeIn( 'slow' );
});
}
}
});
});
});
}
});
});