Question

Summary: This is a basic, stand alone web form. Just html form, with a JQuery included for the functions.

I have a form that checks email and username for uniqueness and validity (of email). I’m using a JQuery onChange event to call each function, which is an Ajax call to a php file.

The JQuery for the username check is as follows:

$("#username").change(function() {
    var username = $("#username").val();
    var msgbox_username = $("#username_status");
    var dataString = "username="+ username;

    $("#username_status").html('<img src="images/loader.gif">Checking Availability.');
    if (username != "" && username.length >= 6){
        $.ajax({
            Type: "POST",
            url: "functions/check_username.php",
            data: dataString,
            success: function(msg_username) {
                $("#username_status").ajaxComplete(function (event, request) {
                    if (msg_username == 'Username Ok') {
                        $("#username").removeClass("red").addClass("green");
                        msgbox_username.html('<font color="Green">Available</font>');
                    } else {
                        $("#username").removeClass("green").addClass("red");
                        msgbox_username.html(msg_username); 
                    }
                });
            }
        });
        return false;
    } else {
        $("#username").removeClass("green").addClass("red");
        msgbox_username.html('<font color="Red">Username of 6 or more characters is required</font>');
    }
}); 

The check_username.php file is as follows:

<?php
$username = $_GET["username"];
include_once("../includes/connect.php");
$query = "SELECT    username 
          FROM      sss_users
          WHERE     username = '$username'";
$result = mssql_query($query);  
if(mssql_num_rows($result) > 0 && strlen($username) >= 6) {
    echo '<font color="#cc0000"><strong>' . $username . '</strong> is already in use. </font>'; 
} else {
    echo 'Username Ok'; 
}
?>

Continuing with the pattern, the email JQuery:

$("#email").change(function() {
    var email = $("#email").val();
    var msgbox_email = $("#email_status");
    var dataString = "email="+ email;

    $("#email_status").html('<img src="images/loader.gif">Checking Availability.');
    var atpos = email.indexOf("@");
    var dotpos = email.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length){
        $("#email").removeClass("green").addClass("red");
        msgbox_email.html('<font color="Red">Valid Email Required</font>');
    } else {
        $.ajax({
            Type: "POST",
            url: "functions/check_email.php",
            data: dataString,
            success: function(msg_email) {
                $("#email_status").ajaxComplete(function (event, request) {
                    if (msg_email == 'Email Ok') {
                        $("#email").removeClass("red").addClass("green");
                        msgbox_email.html('<font color="Green">Available</font>');
                    } else {
                        $("#email").removeClass("green").addClass("red");
                        msgbox_email.html(msg_email);   
                    }
                });
            }
        });
        return false;
    }
});

And the email PHP:

<?php
$email = $_GET["email"];
include_once("../includes/connect.php");
$query = "SELECT    email 
          FROM      sss_users
          WHERE     email = '$email'";
$result = mssql_query($query);        
if(mssql_num_rows($result) > 0) {
    echo '<font color="#cc0000"><strong>' . $email . '</strong> is already in use. </font>';    
} else {
    echo 'Email Ok';    
}
?>

They each work seperately, but if I put an invalid username in the box and then put a valid email, somehow the check_username.php file is called and no matter what is in the box (valid or not) it thinks it’s a valid username.

An example is:

All functions are called on the OnChange Event

1) type in the username asdfasdf (which is available)

2) Delete the username asdfasdf from the text box (this works correctly, displaying a username must have at least 6 characters)

3) type in any valid email

Result: the valid email works correctly, but the username field (which is blank) recalls what was there before (asdfasdf) and says it is a valid username (even though the field is still blank.)

Hope this makes sense. Any suggestions?

SOLUTION

As noted below, the .ajaxComplete() was calling all functions with that tag. Therefore, when I made the following changes it worked:

$("#username_status").ajaxComplete(function (event, request) { ... code here ... });

changed to:

$("#username_status").ajaxComplete(function (event, request, settings) { ... code and new if statement ... });

And then I wrapped

if(settings.url == 'functions/check_username.php') {} 

around the validation code. This process was done for both the username and email validation.

Answer 1

http://api.jquery.com/ajaxComplete/

Whenever an Ajax request completes, jQuery triggers the ajaxComplete
event. Any and all handlers that have been registered with the
.ajaxComplete() method are executed at this time.

Maybe both handlers are being fired.