一起使用ajax，jQuery和php进行实时表单验证

Question

Okay, so I have a form that a user will fill out, these are the username field, and a color verification field. The username field automatically checks my database when the focus is changed to alert the user whether they're username is taken or not. The color verification field compares the color of the image displayed on screen to the color the user enters. If both of these fields are completed successfully, the button to register is displayed. This is the jQuery I am using

$(document).ready(function()
{
    $("#username").blur(function()
    {
    //remove all the class add the messagebox classes and start fading
    $("#msgbox2").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
    //check the username exists or not from ajax
    $.post("checkusername.php",{ username:$(this).val() } ,function(data)
    {
      if(data=='no') //if username not avaiable
      { 
        $("#msgbox2").fadeTo(200,0.1,function() //start fading the messagebox
        {//alert(data);
          //add message and change the class of the box and start fading
          $(this).html('Your username was taken<? $_SESSION['test2'] = 0; ?>').addClass('messageboxerror') .fadeTo(900,1);
        });     
      }
      else 
      {
        $("#msgbox2").fadeTo(200,0.1,function()  //start fading the messagebox
        { //alert(data);
          //add message and change the class of the box and start fading
          $(this).html('User name is available!<? $_SESSION['test2'] = 1; ?>').addClass('messageboxok').fadeTo(900,1);  
        });


      }

    });

});
});

The php file for the above code is:

session_start();
require("../db.php");
$username = $_POST['username'];

$sql ="SELECT * FROM user WHERE username = '$username'";
$go = mysql_query($sql,$db);
$numrows = mysql_num_rows($go);


if ($numrows) {
// no
echo("no");
} else {
// yes
echo "yes";
}

The second field for color is set up the same:

$(document).ready(function()
{
$("#color").blur(function()
{
    //remove all the class add the messagebox classes and start fading
    $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
    //check the color is right or not
    $.post("checkcolor.php",{ color:$(this).val() } ,function(data)
    {
      if(data=='no') //if color is incorrect
      { 
        $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
        {//alert(data);
          //add message and change the class of the box and start fading
          $(this).html('Your color was incorrect<? $_SESSION['test1'] = 0; ?>').addClass('messageboxerror') .fadeTo(900,1);
        });     
      }
      else 
      {
        $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
        { //alert(data);
          //add message and change the class of the box and start fading
          $(this).html('Verification Successful<? $_SESSION['test1'] = 1; ?>').addClass('messageboxok').fadeTo(900,1);  
        });
      }

    });

});
});

The php file for the above code is:

session_start();

$sescolor= $_SESSION['color'];
$usercolor = $_POST['color'];
$_SESSION['usercolor']= $_POST['color'];
$usercolor = strtoupper($usercolor);
if ($sescolor==$usercolor) {
    echo("yes");
} else {
  echo "no";
}

What I wanted to happen was for the two fields "username" and "color" to change the session variables of 'test1' and 'test2' based on they're state. So if username was invalid, test2 would be assigned a 0 instead of 1. Same for the color verification. Then the idea was that I would have a seperate function check to see if both 'test1' and 'test2' were 1. If so, the user would see the submit button, if not, they would see an error message.

This is what the "checkboth.php" would look like

$test1= $_SESSION['test1'];
$test2= $_SESSION['test2'];


echo $test1;
echo $test2;
if(($test1 ==1) && ($test2 ==1))
{
echo("yes");
}
else{
echo("no");
}

I am using the same jQuery structure for the third function. This works, however, I always get back 'yes'. Upon a var_dump of the session, I find test1 and test2 to always equal 0. How do I go about accomplishing this? Thanks in advance!

Answer 1

Why not use beautiful jquery validation plugin ? It has remote validation method .

Answer 2

I prefer ajax to post....after all, you're trying to do an asynchronous check of data without interrupting the UI experience. That's the "A" in ajax.

$.ajax({
url: "checkusername.php",                   //
timeout: 30000,
type: "POST",
data: data,
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown)  {
    alert("An error has occurred making the request: " + errorThrown)
},
success: function(data){
        //do highlights
}
});

If you plan on using JSON as return data as I have shown, then you have to return json in your php doc. Right now, you've got it returning yes/no printed on the page, which would work if you specified your callback type as text. Otherwise, using your method it's just going to get confused.

As to your color verification, I'd "stack" it in the success of the first as you can't have it happen until after the username is checked.