Jquery使用$ .post函數進行實時輸入驗證

Question

嗨！您好：
我對Jquery和web開發很陌生，所以請耐心等待。 我要實現我的網站上使用jQuery實時輸入驗證。也許我在這篇文章中有一些語法錯誤，但我確信我沒有任何在我的真實代碼中。

這是我有什麼，只要用戶輸入的東西是不是空白的錯誤（）將被調用，使POST請求到服務器（PHP + MySQL的），以檢查是否輸入值已經存在。當按下提交按鈕時，錯誤（）也會再次使用。

之前，我按下提交按鈕這工作完全正常。如果我輸入了已存在的內容，表單將不會被提交。但是如果我輸入新的東西，即使數據仍然插入到數據庫中，我仍然會得到（「存在」）文本。 （「成功」）後，我將永遠得到（「存在」）。看起來像我提交時，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。 第二個$ .post是異步的。這意味着它將繼續執行代碼，同時等待來自ajax請求的響應。你可以在我的jQuery使用$.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(); 
     }); 
});