Совместное использование ajax, jQuery и php для проверки формы в реальном времени

Question

Хорошо, у меня есть форма, которую пользователь заполнит, это поле имени пользователя и поле проверки цвета.Поле имени пользователя автоматически проверяет мою базу данных, когда фокус изменяется, чтобы предупредить пользователя, занято ли его имя пользователя или нет.Поле проверки цвета сравнивает цвет изображения, отображаемого на экране, с цветом, который вводит пользователь.Если оба эти поля заполнены успешно, отображается кнопка для регистрации.Это jQuery, который я использую

$(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);  
        });


      }

    });

});
});

Файл php для вышеуказанного кода:

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";
}

Второе поле для цвета установлено так же:

$(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);  
        });
      }

    });

});
});

Файл php для вышеприведенного кода:

session_start();

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

Я хотел бы получить два поля: «имя пользователя» и «цвет».msgstr "чтобы изменить переменные сеанса 'test1' и 'test2' в зависимости от их состояния.Таким образом, если имя пользователя было неверным, test2 будет присвоено 0 вместо 1. То же самое для проверки цвета.Тогда идея состояла в том, что у меня была бы отдельная проверка функции, чтобы увидеть, были ли оба 'test1' и 'test2' равны 1. Если это так, пользователь увидит кнопку отправки, если нет, он увидит сообщение об ошибке.

Вот как будет выглядеть "checkboth.php"

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


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

Я использую ту же структуру jQuery для третьей функции.Это работает, однако, я всегда возвращаюсь «да».После var_dump сессии я обнаружил, что test1 и test2 всегда равны 0. Как мне добиться этого?Заранее спасибо!

Answer 1

Я предпочитаю публиковать ajax .... в конце концов, вы пытаетесь выполнить асинхронную проверку данных, не прерывая работу пользовательского интерфейса.Это «A» в 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
}
});

Если вы планируете использовать JSON в качестве возвращаемых данных, как я уже показал, тогда вы должны вернуть json в свой документ php.Прямо сейчас у вас есть возвращаемое да / нет на странице, что сработало бы, если бы вы указали тип обратного вызова в виде текста.В противном случае, используя ваш метод, он просто запутается.

Что касается проверки цвета, я бы «сложил» ее в случае успеха первого, поскольку вы не сможете, чтобы это произошло до тех пор, пока имя пользователя не станетпроверено.

Answer 2

Почему бы не использовать красивый плагин проверки jquery ? Он имеет метод удаленной проверки .