When I open the page with normal request (non ajax), everything works fine. But when I load that form with ajax, the client validation in that form does not work.

The form generator is classic gii-generated stuff:

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

Ajax loading is done like this:

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

I had to call renderPartial with processOutput = true, so that it outputs the javascript. The widget-generated javascript looks like this:

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

I've traced the problem to the fact that when $('#cat-form') selection is done, the returned jQuery object is empty, ie there is no form yet.

How do I properly add client validation for ajax loaded content in Yii?

I am stupid, and have just wasted 4 hours because of this:

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

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

So the script got executed when the form was only in temporary element, that was not yet appended to the page. Hence, the $('#form') did not find anything.

When I open the page with normal request (non ajax), everything works fine. But when I load that form with ajax, the client validation in that form does not work.

The form generator is classic gii-generated stuff:

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

Ajax loading is done like this:

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

I had to call renderPartial with processOutput = true, so that it outputs the javascript. The widget-generated javascript looks like this:

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

I've traced the problem to the fact that when $('#cat-form') selection is done, the returned jQuery object is empty, ie there is no form yet.

How do I properly add client validation for ajax loaded content in Yii?

I am stupid, and have just wasted 4 hours because of this:

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

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

So the script got executed when the form was only in temporary element, that was not yet appended to the page. Hence, the $('#form') did not find anything.

• javascript
• php
• jquery
• ajax
• yii

• 2 Wtf downvote. At least specify what's the problem. I've been trying to fix this for hours now. – psycho brm Commented Oct 15, 2013 at 18:23
• How do you load the form? If you get the form as HTML rendered partially in asynchronous request then, I guess, it's expected. The reason is that actual JavaScript code responsible for validation is left there, on ajax-loaded page but not on yours displayed in browser. – ezze Commented Oct 15, 2013 at 18:27
• I load it with simple jQuery $.get and insert all of it with simple $(..).html(resp). – psycho brm Commented Oct 15, 2013 at 18:34
• As i said above, you get only HTML but not JavaScript code purposed to validate the form. I didn't try but you probably could register yiiactiveform core script on your static page and, when form loads from ajax, apply jQuery plugin of active form like it's done here: $('#your-active-form-id').yiiactiveform(options);, where options is JavaScript-encoded clientOptions. – ezze Commented Oct 15, 2013 at 18:50
• If you have no CActiveForm widget in the initial page (preloaded before AJAX call), Yii does not know that it should add validation script into the page. Moreover, only the widget can provide info (fields and rules) required to generate appropriate JavaScript for client-side calculations. – Stan Commented Oct 15, 2013 at 20:29

1 Answer 1

Since I have just wasted few hours looking for solution (I feel like this happens a lot in programming), I may as well now explain the whole thing so that others don't have to end up like me. :|

1. enableAjaxValidation in _form.php

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

2. performAjaxValidation in ModelController.php

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

3. Let the renderPartial output the javascript

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

4. Append the ajax loaded content

$.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

Good luck.