$ .post関数を使用したJqueryのリアルタイム入力検証

Question

こんにちはGuys：
JqueryとWeb開発の新機能です。 私のウェブサイトでJqueryを使ってリアルタイム入力検証を実装したいと思います。たぶん私はこの記事でいくつかの構文エラーがありますが、私は実際のコードには何も持っていないと確信しています。

これは、入力値が既に存在するかどうかを確認するために、ユーザーが空白ではない何かエラーが（）と呼ばれ、サーバー（PHP + MySQLの）へのPOSTリクエストを行います入力したときに、私が持っているものです。また、submit（）ボタンを押すと、error（）が再度使用されます。

私は送信ボタンを押す前に、これは完全に正常に動作します。すでに存在するものを入力した場合、そのフォームは提出されません。しかし、私が新しいものを入力しても、まだデータがデータベースに挿入されていても、（存在する）テキストを取得します。私はいつも（「存在」）後に（「成功」）得られます。私が提出するときのように、エラー（）からの.post要求は、フォームの.post要求の後に行われます。誰もこのバグを解決する方法はありますか？このタイプの入力検証を構成する別の方法？ ありがとう

$('.unique').change(function(){ 
    error($(this)); 
}); 

function error(obj) 
{ 
    var ok = true; 

    if(obj.val().length == 0) 
    { 
     alert('This field can not be blank'); 
     ok = false; 
    } 

    else 
    { 
     var data = "action=check&input=" + obj.attr('name') + "&value=" + obj.val(); 
     $.post('database.php', 
       data, 
       function(reply){ 
        if(reply == true) 
        { 
         alert("This " + obj.attr('name') + " already exists"); 
         ok = false; 
        }   
       }); 

    } 
    return ok; 
} 

//When the user submits the form 
$('#info').submit(function(){ 
    var ok = true; 
    var data = 'action=insert&' + $(this).serialize(); 

    //Passes each input to the error() 
    $('.unique').each(function{ 
     var temp = error($(this)); 
     ok = ok && temp; 
    }); 

    if(!ok) return false; 

    $.post('database.php', 
      data, 
      function(reply){ 
       alert(reply); 
      }); 
}); 

<form id="info" name="info" action="" method="post"> 
    <input type ="text" class = "unique" id = "username" name = "username" class = "unique"> 
    <input type ="text" class = "unique" id = "email" name = "email" class = "unique"> 
</form> 

//On the server 
if(isset($_POST['action'])) 
{ 
    if($_POST['action'] == 'check') 
    { 
     $query = sprintf("select * from Users where %s = '%s'", 
                   $_POST['input'], 
                   $_POST['value']); 
     $result = mysql_query($query); 
     if(mysql_num_rows($result) > 0) 
     { echo true;} 

     else 
     { echo false;} 
    } 
    else 
    { 
     $query = sprintf("insert into Users(username, email) values('%s','%s')", 
        $_POST['username'], 
        $_POST['email']); 
     if(!($result = mysql_query($query))) 
      die(mysql_error()); 

     echo 'Success'; 
    }  
} 

Answer 1

すぐに目立つものがいくつかあります。 最初のエラー関数は常にfalseを返します。 2番目の$ .postは非同期です。つまり、ajaxリクエストからの応答を待っている間、コードの実行を続けます。 jqueryで変更するには、$ .postリクエストの前に$.ajaxSetup({async:false});を使用します。ここで

は正常に動作するはずのコードサンプルです：

$('.unique').change(function(){ 
    error($(this)); 
}); 

function error(obj) 
{ 
    var ok = true; 

    if(obj.val().length == 0) 
    { 
     alert('This field can not be blank'); 
     ok = false; 
    } 
    else 
    { 
     var data = { 
      action: 'check', 
      input: obj.attr('name'), 
      value: obj.val() 
     }; 

     $.ajaxSetup({async:false}); // Force program execution to wait for ajax response 
     $.post('database.php', data, function (reply) { 
      if (reply) { 
      alert("This " + obj.attr('name') + " already exists"); 
      ok = false; 
      } 
      $.ajaxSetup({async:true}); // Setup ajax to be async again 
     }); 
    } 
    return ok; 
} 

//When the user submits the form 
$('#info').live('submit', function(e){ 
    e.preventDefault(); 
    var ok = true; 

    //Passes each input to the error() 
    $('.unique').each(function(){ 
     ok = ok && error($(this)); 
    }); 

    if (!ok) { 
     return false; 
    } 

    $.post('database.php', 'action=insert&' + $(this).serialize(), function(r) { 
     alert(reply); 
    }); 
}); 

Answer 2

私は過去にこの問題を抱えていました。

$('#info').submit(function(e){ 
e.preventDefault(); 

var ok = true; 
var data = 'action=insert&' + $(this).serialize(); 

//Passes each input to the error() 
$('.unique').each(function{ 
    var temp = err($(this)); 
    ok = ok && temp; 
}); 

if(!ok) return false; 

$.post('database.php', 
     data, 
     function(reply){ 
      alert(reply); 
     }); 
}); 

これにより、フォームが実際に送信されないようにすることができます。 Ajaxのポストは大丈夫であるとき、あなたはまだそれを提出する場合：

$('#info').submit(function(){ 
    var theForm = this; 
    $.post('database.php', 
     data, 
     function(reply){ 
      alert(reply); 
      theForm.submit(); 
     }); 
});