2011-08-09 33 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