ZF2 - 在引导模式中进行验证 [英] ZF2 - validation within a bootstrap modal

问题描述

我在 zf2 应用程序中使用 twitter bootstrap.引导模式显示包含用户详细信息的表单，我希望对其进行编辑和保存.如果我只是在对话框中提交表单并重新加载整个页面，这是相当微不足道的，但我正在寻找一种方法来验证表单而不提交它，理想情况下，如果数据有效，则它可以将新数据传回模式对话框关闭时的页面.

我该怎么做 - 它是否需要是一个 ajax 调用?如果是这样，我将如何在我的控制器中构造它，以一种可以在模态中呈现错误的方式返回表单验证?

到目前为止，下面接受的答案是现货.

我唯一无法理解的是如何将验证数据从控制器传递回引导模式.

作为一个简单的工作流程 - 打开的模态窗口加载了一个绑定到用户模型的编辑表单，该表单显示要编辑的用户数据(所有预加载并已分配给视图).提交模态表单，jquery 挂钩表单提交并将数据作为 ajax 请求发送到 UserController::EditUserAction - 在那里根据模型输入过滤器验证表单数据.如果结果有效，则保存数据并关闭模态对话框.如果数据无效，例如将电子邮件地址更改为已存在的地址，则该操作将返回一个带有表单错误的 JsonModel - 然后如何将其传递给引导程序模式以突出显示产生错误的字段，例如通常提交表单时 ZF 自动执行的方式是什么?

解决方案

您可以使用 ajax 来做到这一点.要了解在控制器中做什么，您必须了解 ajax 调用的基本原理.jQuery 让这一切变得非常简单.

type 是 HTTP 方法(例如 'POST').url 是让你到达控制器的路径，控制器会给你一个响应.data 是要发送的表单数据.更多文档位于 https://api.jquery.com/jQuery.ajax/

如果 HTTP 响应代码在 200 中，则执行成功函数.如果您发送 400 或 500 的 HTTP 响应代码，错误函数中的 javascript 将被执行.这可用于在模态对话框中显示错误.

您可以使用以下代码修改控制器中的 HTTP 响应代码:

$this->getResponse()->setStatusCode(400);

其中 400 是 HTTP 响应代码(参见 http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html 有关 HTTP 响应代码的更多信息)

然后，为了将数据与响应一起发回，在控制器中返回一个 JsonModel 而不是 ViewModel

return new JsonModel($array);

其中 $array 是您要发送回浏览器的数据.

如果你经常这样做，你可能会调查 zf2 类 \Zend\Mvc\Controller\AbstractRestfulController.

I am using twitter bootstrap in a zf2 application. A bootstrap modal displays a form containing user details, which i would like to be edited and saved. This is fairly trivial if i just submit form in the dialog and reload the whole page, but i am looking for a way to validate the form without it being submitted, and ideally if the data is valid, for it to pass the new data back to the page when the modal dialog is closed.

How can i do this - would it need to be an ajax call? If so how would i structure that in my controller to return the form validation in a way that the errors can be rendered in the modal?

Edit 1: Accepted answer below is spot on so far.

The only thing i'm having trouble understanding is how to pass the validation data from the controller back to the bootstrap modal.

So as a simple workflow - modal window opens loaded with an edit form bound to a User model, which shows the User data to be edited (all preloaded and assigned to the view already). The modal form is submitted, jquery hooks onto the form submit and sends the data as an ajax request to UserController::EditUserAction - where the form data is validated against the models inputfilter. If it turns out to be valid, the data is saved and the modal dialog is closed. If the data is invalid, say changing the email address to an address that already exists, the action returns a JsonModel with the form error(s) - how is this then passed to the bootstrap modal to highlight the field that produced the error, like the way that ZF does automatically when a form is typically submitted?

解决方案

You would do this with ajax. To understand what to do in your controller you have to understand the fundementals of an ajax call. jQuery makes this pretty easy.

<script>
$(function() {
  jQuery.ajax({
    type: method,
    dataType: 'json',
    url: url,
    data: data,
    error: function(jqXHR, textStatus, errorThrown) {
      // Do something to handle the error
    },
    success: function(data, textStatus, jqXHR) {
      // Do something else on successful validation
    }
  });
});
</script>

The type is the HTTP method (eg. 'POST'). The url is the the route to get you to the controller which will give you a response. The data is the form data to be sent. More documentation is at https://api.jquery.com/jQuery.ajax/

The success function is executed if the HTTP response code is in the 200's. If you send an HTTP response code in the 400's or 500's, the javascript in the error function will be executed. This can be used to show an error in your modal dialog.

You can modify the HTTP response code in a controller by using the following code:

$this->getResponse()->setStatusCode(400);

where 400 is the HTTP response code (see http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html for more info about HTTP response codes)

Then, to send data back with the response, return a JsonModel in the controller instead of a ViewModel

return new JsonModel($array);

where $array is the data you want to send back to the browser.

If you end up doing this a lot, you might investigate the zf2 class \Zend\Mvc\Controller\AbstractRestfulController.

这篇关于ZF2 - 在引导模式中进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！