Grails 和 AJAX：Grails 表单验证使用 ModalBox 或 YUI2 Dialog 工作吗？

Question

几个 Grails 应用程序（例如我正在编写的应用程序）需要 /user 视图和 /admin 视图，这些视图是“仪表板”，基本上用户或管理员可能会在成功登录之后登陆该页面，并且所有数据表和选项卡都在那里，因此他们几乎不需要离开该页面，从而提供更令人满意的用户体验，就像 Gmail 或 Mint 的用户已经习惯了一样。

为了允许从主/用户仪表板进行搜索和表单发布，我一直在使用 modalbox 插件 v0.4 grails install modalbox。 Modalbox 显然正在管理 GET/POST 本身，不幸的是，它丢失了典型约束块为您提供的 99% 的验证。

现在通过替换 g:submitButton 来解决这个问题，在提交中添加一些基本的 JavaScript，如图所示。 （当然，这是一个糟糕的解决方法。）

<input type="button" name="create" class="save" onclick="if (!(document.getElementById('name').value === '' || document.getElementById('summary').value === '')) { document.forms[0].submit(); }" value="Create" />

但必须有更好的方法！有人告诉我使用 g:remoteForm，但还没有看到足够完整的示例来使用 Modalbox 。也许人们正在使用一个新窗口，它会像 Gmail 的撰写窗口一样自动关闭几秒钟？

这可能是一个非常常见的场景，对于 SiteMesh 模板来说已经成熟，或者至少是一个“渲染模板：”，甚至是像 modalBox:createLink 这样的 GSP 标签。

来源可在 Gtown 项目空间中的此处获取。

Answer 1

Modalbox 上的示例已将验证错误隐藏在灯箱中：

无效电子邮件！

所以我认为如果你想使用 Grails 验证，你必须自己控制表单。在这种情况下，灯箱插件将只负责绘制灯箱，您将提供所有表单内容。

我使用 Boxy（另一个灯箱插件，其工作方式应该与您的 Modalbox 类似），下面是我如何在灯箱中使用 Grails 验证的示例。当我创建灯箱时，我使用“shell”操作来填充它。 shell 操作渲染一个模板，模板内部有一个。第一次绘制搜索表单。调用验证操作并使用验证操作的结果重新绘制灯箱的内容。结果可能是成功页面或验证错误页面。

命令对象（在本示例中为 SearchCommand）的使用仅用于演示。

控制器：

def launchLightbox = {
    render template: 'lightboxFrame'
}

def lightboxContents = { SearchCommand cmd ->

    // if the search failed, re-draw the search form with validation errors
    if (cmd.hasErrors()) {
        return [cmd: cmd]
    } 

    // the search succeeded. Show the results within the lightbox
    else {
        render template: 'searchResults', model: [results: cmd.results]
    }
}

_lightboxFrame.gsp：

<g:formRemote name="searchLightbox" 
        url="[action: 'lightboxContents']" update="lightboxContentsDiv">
    <div id="lightboxContentsDiv">
        <g:include view="/yourController/_lightboxContents.gsp"/>
    </div>
</g:formRemote>

_lightboxContents.gsp：

<g:renderErrors bean="${cmd}"/>
<p>Enter your search:</p>
<g:textField name="search" value="${cmd?.search}"/>
<g:submitButton name="submitButton" value="Submit"/>

如果您希望更多地控制搜索成功或失败时执行的操作，例如在失败时呈现验证错误或在成功时关闭灯箱，您可能需要编写你自己的 JavaScript 回调。

与此问题有些相关，并且可能对您有帮助的是 Grails 远程约束插件。我已经有一段时间没有尝试过它了，但是您应该能够使用它来异步重绘页面的某些部分，并处理 Grails 生成的验证错误。