PHP, MySQL, jQuery, AJAX: json data returns correct response but frontend returns error

Question

Hi all,

I have a user registration form. I am doing server side validation on the fly via AJAX. The quick summary of my problem is that upon validating 2 fields, I get error for the second field validation. If I comment first field, then the 2nd field does not show any error. It has this weird behavior. More details below:

The HTML, JS and Php code are below:

HTML FORM:

<form id="SignupForm" action="">
            <fieldset>
                <legend>Free Signup</legend>
                <label for="username">Username</label>
                <input name="username" type="text" id="username" /><span id="status_username"></span><br />
                <label for="email">Email</label>
                <input name="email" type="text" id="email" /><span id="status_email"></span><br />
                <label for="confirm_email">Confirm Email</label>
                <input name="confirm_email" type="text" id="confirm_email" /><span id="status_confirm_email"></span><br />
            </fieldset>
            <p>
                <input id="sbt" type="button" value="Submit form" />
            </p>    

            </form>

JS:

<script type="text/javascript">

$(document).ready(function()
{   

  $("#email").blur(function() 
    { 
        var email = $("#email").val();
        var msgbox2 = $("#status_email");

        if(email.length > 3)
        {           
            $.ajax({  
                type: 'POST',       
                url: 'check_ajax2.php',         
                data: "email="+ email,  
                dataType: 'json',
                cache: false,                           
                success: function(data)
                {                     
                        if(data.success == 'y')
                        {   
                            alert('Available');
                        }  
                        else  
                        {  
                            alert('Not Available');
                        }     
                }
            }); 
        }       

        return false;
    }); 


    $("#confirm_email").blur(function() 
    { 
        var confirm_email = $("#confirm_email").val();
        var email = $("#email").val();
        var msgbox3 = $("#status_confirm_email");           

        if(confirm_email.length > 3)
        {

            $.ajax({  
                type: 'POST',       
                url: 'check_ajax2.php',         
                data: 'confirm_email='+ confirm_email + '&email=' + email,  
                dataType: 'json',
                cache: false,                           
                success: function(data)
                {     
                        if(data.success == 'y')
                        {   
                            alert('Available');
                        }  
                        else  
                        {  
                            alert('Not Available');
                        }     

                }
                , error: function (data)
                 {
                    alert('Some error');
                 }

            }); 
        }       

        return false;
    });           
}); 


</script>

PHP code:

<?php //check_ajax2.php


if(isset($_POST['email']))
{
    $email = $_POST['email'];


    $res = mysql_query("SELECT uid FROM members WHERE email = '$email' ");
    $i_exists = mysql_num_rows($res);

    if( 0 == $i_exists )
    {
        $success = 'y';
        $msg_email = 'Email available';
    }
    else
    {
        $success = 'n';
        $msg_email = 'Email is already in use.</font>';
    }

    print json_encode(array('success' => $success, 'msg_email' => $msg_email)); 
}

if(isset($_POST['confirm_email']))
{
    $confirm_email = $_POST['confirm_email'];
    $email = ( isset($_POST['email']) && trim($_POST['email']) != '' ? $_POST['email'] : '' );



    $res = mysql_query("SELECT uid FROM members WHERE email = '$confirm_email' ");
    $i_exists = mysql_num_rows($res);


    if( 0 == $i_exists ) 
    {
        if( isset($email) && isset($confirm_email) &&  $email == $confirm_email )
        {
            $success = 'y';
            $msg_confirm_email = 'Email available and match';
        }
        else
        {
            $success = 'n';
            $msg_confirm_email = 'Email and Confirm Email do NOT match.';
        }       
    }
    else
    {
        $success = 'n';
        $msg_confirm_email = 'Email already exists.';
    }

    print json_encode(array('success' => $success, 'msg_confirm_email' => $msg_confirm_email)); 
}

?>

THE PROBLEM:

As long as I am validating the $_POST['email'] as well as $_POST['confirm_email'] in the check_ajax2.php file, the validation for confirm_email field always returns an error. With my limited knowledge of Firebug, however, I did find out that the following were the responses when I entered email and confirm_email in the fields:

RESPONSE 1: {"success":"y","msg_email":"Email available"}

RESPONSE 2: {"success":"y","msg_email":"Email available"}{"success":"n","msg_confirm_email":"Email and Confirm Email do NOT match."}

Although the RESPONSE 2 shows that we are receiving the correct message via msg_confirm_email, in the front end, the alert 'Some error' is popping up (I have enabled the alert for debugging). I have spent 48 hours trying to change every part of the code wherever possible, but with only little success. What is weird about this is that if I comment the validation for $_POST['email'] field completely, then the validation for $_POST['confirm_email'] field is displaying correctly without any errors. If I enable it back, it is validating email field correctly, but when it reaches the point of validating confirm_email field, it is again showing me the error.

I have also tried renaming success variable in check_ajax2.php page to other different names for both $_POST['email'] and $_POST['confirm_email'] but no success. I will be adding more fields in the form and validating within the check_ajax2.php page. So I am not planning on using different ajax pages for validating each of those fields (and I don't think it's smart to do it that way). I am not a jquery or AJAX guru, so all help in resolving this issue is highly appreciated.

Thank you in advance.

Answer 1

The error handler is called if the HTTP status code is indicative of an error as well as when parsing of the response fails.

I think that your error handler is being called upon receipt of RESPONSE 2 because {"success":"y","msg_email":"Email available"}{"success":"n","msg_confirm_email":"Email and Confirm Email do NOT match."} is not valid JSON. You can use the validator at: http://jsonlint.com/.

In your PHP, you could define a $response_object array at the top and print json_encode($response_object) at the bottom:

<?php //check_ajax2.php

$response_object = array('success' => 'y');

if(isset($_POST['email']))
{
    $email = $_POST['email'];


    $res = mysql_query("SELECT uid FROM members WHERE email = '" . mysql_real_escape_string($email)  . "' ");
    $i_exists = mysql_num_rows($res);

    if( 0 == $i_exists )
    {
        $msg_email = 'Email available';
    }
    else
    {
        $response_object['success'] = 'n';
        $msg_email = 'Email is already in use.';
    }

    $response_object['msg_email'] = $msg_email; 
}

if(isset($_POST['confirm_email']))
{
    $confirm_email = $_POST['confirm_email'];
    $email = ( isset($_POST['email']) && trim($_POST['email']) != '' ? $_POST['email'] : '' );



    $res = mysql_query("SELECT uid FROM members WHERE email = '" . mysql_real_escape_string($confirm_email) . "' ");
    $i_exists = mysql_num_rows($res);


    if( 0 == $i_exists ) 
    {
        if( isset($email) && isset($confirm_email) &&  $email == $confirm_email )
        {
            $msg_confirm_email = 'Email available and match';
        }
        else
        {
            $response_object['success'] = 'n';
            $msg_confirm_email = 'Email and Confirm Email do NOT match.';
        }      
    }
    else
    {
        $response_object['success'] = 'n';
        $msg_confirm_email = 'Email already exists.';
    }

    $response_object['msg_confirm_email'] = $msg_confirm_email; 
}

print json_encode($response_object);

Note that I added calls to mysql_real_escape_string to help prevent SQL injection.