如何使用jQuery验证插件进行表单级服务器端验证

How to use jQuery Validation plugin with form-level server-side validation?

本文关键字：验证 表单 服务器端 插件 何使用 jQuery      更新时间：2023-09-26

对于在表单通过初始客户端验证后返回的服务器端验证错误，触发元素错误的最佳方法是什么?

$("#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);

我想我从Validator/showErrors的文档中找到了它

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

制作。写一个插件，将做任何你想要的。或者，如果你变得复杂，简单地写一个javascript函数来做，并调用它。

我会写一个插件，它会创建一个div，填充错误文本并使其动画化。

在提交表单时，我将窗体的目标设置为页面上一个不可见的iframe，该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);
    }
}
相关文章：