リアルタイムフォームの検証にajax、jQuery、phpを併用する

Question

これで、ユーザが記入するフォームがあります。これらはユーザ名フィールドとカラー確認フィールドです。ユーザー名が取得されたかどうかをユーザーに警告するためにフォーカスが変更されたとき、usernameフィールドは自動的にデータベースをチェックします。色確認フィールドは、画面に表示される画像の色とユーザーが入力した色とを比較する。両方のフィールドが正常に完了すると、登録するボタンが表示されます。これは私が

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


     } 

    }); 

}); 
}); 

を使用していますjQueryのある上記のコードのための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"; 
} 

2番目のフィールドは同じに設定されています

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

「test1」と「test2」のセッション変数を「状態」に基づいて変更するには、2つのフィールド「username」と「color」が必要でした。したがって、usernameが無効な場合、test2には1ではなく0が割り当てられます。カラー検証でも同じです。次に、「test1」と「test2」の両方が1であるかどうかを確認するために別個の機能チェックを行うという考えがありました。そうであれば、ユーザーには送信ボタンが表示され、そうでなければエラーメッセージが表示されます。

これは「checkboth.phpは」私は第三の機能のために同じjQueryの構造を使用しています

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


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

どのように見えるかです。これはうまくいくが、私はいつも「はい」を返す。セッションのvar_dumpを実行すると、test1とtest2が常に0になることがわかります。これを達成するにはどうすればいいですか？ ありがとうございます！

Answer 1

私はポストするのが好きです。結局のところ、あなたはUIの経験を中断することなく、データの非同期チェックをしようとしています。それがajaxの "A"です。

$.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を返信データとして使用する予定がある場合は、php docにjsonを返す必要があります。今では、ページにyes/noが返されています。これは、コールバックタイプをテキストとして指定した場合に機能します。さもなければ、あなたの方法を使って、ちょうど混乱するでしょう。

あなたのカラー検証に関して、私はユーザー名がチェックされるまで起こることができないので、最初の成功で「スタック」します。

Answer 2

なぜ美しく使用しないのですかjquery validation plugin？それはremote validation methodです。