check already registered email without submit and display the error using an image not echo message

Question

Please help me out... I'm creating a multistage sign up form, on my first step user is asked for email,password and confirm password... so when email input is typed and user enters the password, i need the script to be run in background for checking availability of email id, and if not available then message should be shown via image not echo message, so in short all these happens without submit ... and I'm using PHP please help me out...

Thanks in advance

This is HTML:

            <input type="password" id="signuppassword" name="signuppassword" class="register-input" placeholder="Password" />
            <input type="password" id="signup-cpassword" name="signup-cpassword"  class="register-input" placeholder="Confirm Password" />
            <input type="button" name="next" class="next action-button" id="first-next" value="" />

Answer 1

give ur email field a class or Id n use the folling function.

 $("#email").blur(function() 
    {
    var searchbox = $(this).val().trim();
    checkEmailExistance(searchbox);
    });//end on blur 


function  checkEmailExistance(searchbox){

var dataString = 'searchword='+ searchbox.trim();
            if(searchbox=='')
              {
              }
                else
                {

                $.ajax({

                type: "POST",

                url: '<?php echo base_url()."index.php/register/email_validation"; ?>',
                data: dataString,
                cache: false,
                beforeSend: function() {

                },
                success: function(dataString)
                {
                if(dataString=="0"){
                    $("#error").text("This is Unique Address");
                       $("#error").attr('isverified','1');
                   }else
                    {
                          $("#error").text("This email address is already present");
                           $("#error").attr('isverified','0');
                    }


                }

                });//end ajax
                };