Yii 客户端验证不适用于 ajax 加载的表单答案

【问题标题】：Yii client validation not working on ajax loaded formYii 客户端验证不适用于 ajax 加载的表单
【发布时间】：2013-10-23 16:05:55
【问题描述】：

当我使用正常请求（非 ajax）打开页面时，一切正常。但是当我使用 ajax 加载该表单时，该表单中的客户端验证不起作用。

表单生成器是经典的gii生成的东西：

$form = $this->beginWidget('CActiveForm', array(
    'id'=>'cat-form',
    'enableAjaxValidation'=>true,
    'action' => ...,
    'clientOptions'=>array('validateOnSubmit'=>true),
    )
);
// - form inputs go here -
$this->endWidget();

Ajax 加载是这样完成的：

$.get(page, function(formHtml) {
    $('#content').html(formHtml);
});

我必须使用processOutput = true 调用renderPartial，以便它输出javascript。小部件生成的 javascript 如下所示：

$('#cat-form').yiiactiveform({'validateOnSubmit':true,'attributes':[...]});

我已经把问题追溯到$('#cat-form')选择完成后，返回的jQuery对象是空的，即还没有表单。

如何在 Yii 中为 ajax 加载的内容正确添加客户端验证？

我很愚蠢，因此浪费了4个小时：

var slider = $('.slider');
var slide = $('<div class="slide">').html(resp); // facepalm

// few lines later..
slider.append(slide);

因此，当表单仅在临时元素中时脚本被执行，该元素尚未附加到页面。因此，$('#form') 没有找到任何东西。

【问题讨论】：

Wtf 否决票。至少说明问题所在。我已经尝试解决这个问题好几个小时了。
如何加载表单？如果您将表单作为 HTML 部分呈现在异步请求中，那么我猜，这是意料之中的。原因是负责验证的实际 JavaScript 代码留在那里，在 ajax 加载的页面上，而不是在浏览器中显示的页面上。
我用简单的 jQuery $.get 加载它，然后用简单的$(..).html(resp) 插入它。
正如我上面所说，您只获得 HTML 而不是用于验证表单的 JavaScript 代码。我没有尝试，但您可能可以在静态页面上注册 yiiactiveform 核心脚本，并且当从 ajax 加载表单时，应用活动表单的 jQuery 插件，就像它已经完成 here:$('#your-active-form-id').yiiactiveform(options);，其中 options 是 JavaScript -编码clientOptions.
如果初始页面中没有 CActiveForm 小部件（在 AJAX 调用之前预加载），Yii 不知道它应该在页面中添加验证脚本。此外，只有小部件可以提供为客户端计算生成适当的 JavaScript 所需的信息（字段和规则）。

标签： javascript php jquery ajax yii

【解决方案1】：

由于我刚刚浪费了几个小时来寻找解决方案（我觉得这种情况在编程中经常发生），我现在不妨解释一下整个事情，这样其他人就不必像我一样结束了。 :|

1。 _form.php 中的 enableAjaxValidation

$form = $this->beginWidget('CActiveForm', array(
    'enableAjaxValidation'=>true,
    ...

2。在 ModelController.php 中执行 AjaxValidation

public function actionCreate() {
    $model=new Model;
    $this->performAjaxValidation($model);
    ...

3。让renderPartial输出javascript

$outputJs = Yii::app()->request->isAjaxRequest;
$this->renderPartial('_form', array('model'=>new Model), false, $outputJs);

4。追加ajax加载的内容

$.get(url, function(resp) {
    $('#content').html(resp);

    // !! DO NOT append the html to element that is not yet part of the document
    // var slide = $('<div>').html(resp);   // WRONG
    // $('.slides').append(slide);          // WRONG

祝你好运。

【讨论】：