2013-07-01 100 views
1

好了,我有一個jQuery覆蓋以下形式:如何使用jQuery Tools進行服務器驗證和客戶端驗證?

<div class="profile_about_edit_container" id="profile_about_edit_container"> 
    <form id="profile_edit_form" name="profile_edit_form" method="post" action="validation.php"> 
     <label>First Name:</label> 
     <input type="text" name="firstname" maxlength="50" size="30"> 
     <label>Last Name:</label> 
     <input type="text" name="lastname" maxlength="50" size="30"> 
     <button type="submit" class="save">Save</button> 
     <button class="close">Cancel</button> 
    </form> 
</div> 

這是利用與類中的<a> = 「profile_popups_form」 顯示和以下的Javascript:

$(document).ready(function() { 
    $(".profile_popups_form").overlay({ 
    }); 
}); 

此正確地顯示,和validation.php然後回聲的錯誤消息數組像這樣:

if (count($errors) > 0) { 
    echo json_encode($errors); 
} 

但現在我試圖使用jQuery cl在此表單上驗證服務器驗證&。

我嘗試這樣做:

$(document).ready(function(){ 
    var form = $("#profile_edit_form"); 

    $("#profile_edit_form").submit(function(e) { 
    e.preventDefault(); 

    var input = $("#profile_edit_form").validator(); 
    $.getJSON(form.attr("action") + "?" + form.serialize(), function(json) { 
     if (json !== '') { 
      input.data("validator").invalidate(json); 
     } 
     else 
      $('#profile_edit_form').unbind('submit').submit(); 
    }); 
}); 

隨着提交表單和以正常的方式的jQuery工具驗證確實顯示該陣列的錯誤消息的目標。但我沒有運氣。

我接近這個權利嗎?如果是這樣,我做錯了什麼?我不確定這是否是引起該問題的Javascript,或者如果我在邏輯上正確處理這個問題。我可以找到沒有資源解釋如何成功使用PHP的JQuery工具驗證。

當前數組剛剛顯示在屏幕上,就像您回顯文本一樣。

我用下面的資源來獲取代碼返回數組: http://www.abdullahyahya.com/2012/06/20/javascript-client-side-form-validation-using-server-side-form-validation/

回答

0

嘗試做一個Ajax請求的PHP文件,並取回來自服務器的響應。客戶端可以通過各種方式完成;從HTML5標記到普通正則表達式

data = $(this).serializeArray(); 
//we serialized the data of the form and then we do the ajax request 
$.ajax({ 
    url: 'validate.php', 
    type: 'post', 
    data: data, 
    dataType : 'json', 
    success: function (dat) { 
     if(dat.error==0){ 
      //dat.error is my returned error from the php file 
     }else{ 
      //handle the errors 
     } 


      } 
     }, 
     error: function(){ 
        //that's if something is wrong with sent data 
      alert('failure'); 
     } 
    }); 
相關問題