2011-08-09 36 views
12

在表單通過初始客戶端驗證之後,觸發返回的服務器端驗證錯誤的元素觸發錯誤的最佳方法是什麼?如何使用jQuery驗證插件與表單級服務器端驗證?

$("#contact_form").validate({ 
    submitHandler: function(form) { 
    $.ajax({ 
     type: 'POST', 
     dataType: 'json', 
     url: '/contact/send', 
     data: $(form).serialize(), 
     success: function(response) { 
     if(response.error) { //server came back with validation issues 
      var fields = response.fields; 
      for(var i=0, var len = fields.length; i < len; i++) { 
      var field_name = fields[i].name; 
      var field_error = fields[i].error; 

      // TRIGGER ERROR ON AFFECTED ELEMENT 

      } 
      return false; 
     } 
     //everything went ok, so let's show a thanks message 
     showThanks(); 
     } 
    } 
}); 

我想是這樣的:

$(form).find("[name='" + field_name + "']").triggerError(field_error); 

但我並沒有看到以這種方式手動觸發錯誤的任何API方法。

回答

13

我認爲我計算出來從文檔Validator/showErrors

var validator = $("#contact_form").validate(); 
validator.showErrors({"state": "Bad state."}); 
+0

如何在單個字段上顯示多個錯誤消息。像{'state':['bad state','應該是5個字符']} – Prasanna

0

做到這一點。 Write a plugin可以做任何你想要的。 或者,如果你變得複雜,只需編寫一個JavaScript函數來完成並調用它。

我會寫一個插件,它會創建一個div,用錯誤文本填充它並很好地爲其設置動畫效果。

+1

我是實際的我開始滾動我自己的插件,但是我想盡量避免重新發明輪子。這實際上是我錯過的唯一功能,它看起來像一個相當常見的用例,所以我只是試圖在我花時間推出自己的產品之前看看是否有其他人遇到過。 – user126715

+0

我通常覺得最好的工作是你自己做的。我的快速搜索沒有提供任何結果,也許有人知道一個特別的插件,現在,我會寫一個非常簡單的插件 –

-3

在提交表單時,我會在頁面上將窗體的目標設置爲一個不可見的iframe,然後使用它的結果在topWindow中調用一個函數。

<iframe id="subject_frame" name="submit_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe> 

然後在iframe頁面調用成功,要麼重定向或顯示錯誤的頂窗JavaScript方法。

在iframe

<script language="javascript" type="text/javascript"> 
    window.top.window.submitComplete("<?php echo $response; ?>"); 
</script> 

在頂部窗口(作爲一個例子)

function uploadComplete(result){ 
    $.unblockUI(); 
    if(result == "OK"){ 
     $.blockUI({ message: "<span style='color:green;'>File upload successful, request submitted.</span><br/><br/>Redirecting..." }); 
     setTimeout(function() { 
      $.unblockUI({ 
       onUnblock: function(){ window.location='thankyou.php'; } 
      }); 
     }, 2000); 

    } else { 
     $.blockUI({ message: "<span style='color:red;'>Failed.</span><br/><br/>"+result }); 
     $('.blockOverlay').attr('title','Click to remove').click($.unblockUI); 
    } 
} 
+0

在這種情況下使用'iFrame'遠非理想。在這種情況下使用的技術要好得多。 –

+0

我已經得到了表單提交過程的控制權,我只是想能夠觸發錯誤,就像基於響應的任何其他客戶端驗證錯誤一樣。 – user126715