What you are looking for is JQuery’s ajax methods.

They can get data from the server and update your dom on the fly without a page reload.

This is pretty straightforward using Get or Post

JQuery also has some other ajax methods which may be useful as well.

Here’s my login jQuery/AJAX proccess script.
You just need to create a few divs/spans in your form for error message and loading and to make this work, in your login PHP script you must add if login is correct echo’1′; or whatever is your success echo in your PHP script change that in this part of jQuery code

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' );

                 });
                }
              }
            });
          });
        });
      }
    });

});