Grails JQuery Ajax表单验证

我有一个模态对话框,我从gsp加载一个表单,我正在努力为基于ajax的表单找到合适的解决方案,其中包含 JSON验证.成功消息,如闪存范围消息：

$('#calendar_form').live('click',function () {
        $.modal({
            ajax: './form',title: '${message(code:'calendar.main.addAppointment')}',overlayClose: true
        });
    });

在那个表单中我有以下JS：

$(document).ready(function() {
    $('#form1').submit(function() {

        $.ajax({
            type: 'POST',url: '${createLink(action:'post')}',data: $("#form1").serialize(),success: function(result) {
                alert(result);
            }
        });
    });
});

我正在返回JSON响应,如果它成功并且发生错误时我需要Ajax,否则我的模态对话框由于新请求而消失.

所以这是我的问题：

>如何对我在控制器中验证期间发生的故障做出反应？
>我需要将哪些错误http代码用于控制器中的验证错误？
>如何使用表单中的错误消息更新特定字段？
>如何更新页面的flash部分以呈现成功消息？
>成功后如何更新页面的其他部分？

谢谢！

解决方法

有很多不同的方法可以实现这一点,可能还有一个或多个插件可以帮助您实现目标.但是,我会告诉你我一般如何处理这件事.我有一个看起来像这样的物体……

class AjaxPostResponse {
  boolean success
  String message
  String html
  def domainObject
  def errors = [:] 
}

这是我呈现为JSON的对象.因此,如果存在验证错误,则成功将变为false,并将所有错误添加到错误映射中.我在服务中执行此操作,该方法如下所示：

def preparePostResponse(domainInstance) {
    def g = grailsApplication.mainContext.getBean('org.codehaus.groovy.grails.plugins.web.taglib.ApplicationTagLib')
    def postResponse = new AjaxPostResponse(domainObject: domainInstance)
    if (domainInstance.hasErrors()) {
      g.eachError(bean: domainInstance) {
        postResponse.errors."${it.field}" = g.message(error: it)
      }
      postResponse.success = false
      postResponse.message = "There was an error"
    } else {
      postResponse.success = true
      postResponse.message = "Success"
    }
    return postResponse
}

所以我的控制器看起来像

def save = {
  def someObjInstance = new SomeObj(params)
  someObjInstance.save(flush:true)
  render myService.preparePostResponse(someObjInstance) as JSON
}

在我的客户端代码中,我做了类似的事情(使用jQuery表单插件,但这也适用于通用的$.ajax / $.post / $.get方法……

$(formElement).ajaxSubmit({
    dataType: 'json',success: function(jsonData) {
      if (jsonData.success) {
        // do good stuff
      } else {
        // bad stuff happened
        showErrors(jsonData.errors);
      }
    }
});

而我的showErrors功能

function showErrors(errors,element) {
    var errorList = $("<ul>");
    for (field in errors) {
        errorList.append("<li>" + errors[field] + "</li>")
        $('input[name=' + field + ']').addClass('error');
    }
    if (!element) {
        $(".errors").html("").append(errorList).show(500);
    } else {
        $(element).html("").append(errorList).show(500);
    }
}

希望有所帮助.

Grails JQuery Ajax表单验证

解决方法

猜你在找的jQuery相关文章